import { StyleSheet } from "react-native";
import { Colors } from "@/constants/theme";

export type ColorScheme = "light" | "dark";

export function createTableStyles(colorScheme: ColorScheme) {
  const colors = Colors[colorScheme];

  return StyleSheet.create({
    container: {
      width: "100%",
      backgroundColor: colors.surface,
      borderRadius: 12,
      padding: 16,
      marginVertical: 10,
      borderWidth: 1,
      borderColor: colors.border,
      shadowColor: colors.text,
      shadowOpacity: 0.1,
      shadowRadius: 4,
      elevation: 2,
    },
    headerRow: {
      flexDirection: "row",
      justifyContent: "space-between",
      alignItems: "center",
    },
    title: {
      fontSize: 18,
      fontWeight: "700",
      color: colors.text,
    },
    totalCollapsed: {
      color: colors.warning,
      fontSize: 18,
      fontWeight: "700",
      textAlign: "center",
    },
    row: {
      flexDirection: "row",
      justifyContent: "space-between",
      paddingVertical: 8,
      borderBottomWidth: 0.5,
      borderBottomColor: colors.separator,
    },
    header: {
      backgroundColor: colors.backgroundSecondary,
      borderRadius: 6,
      marginTop: 10,
    },
    left: {
      textAlign: "left",
    },
    rowHorizontal: {
      flexDirection: "row",
      paddingVertical: 8,
      borderBottomWidth: 0.5,
      borderBottomColor: colors.separator,
      paddingLeft: 15,
    },
    tableHeader: {
      backgroundColor: colors.backgroundSecondary,
      borderRadius: 6,
      marginTop: 10,
    },
    headerCell: {
      flex: 1,
      fontSize: 15,
      fontWeight: "600",
      color: colors.text,
      textAlign: "center",
    },
    headerCellLeft: {
      flex: 1,
      fontSize: 15,
      fontWeight: "600",
      color: colors.text,
      textAlign: "left",
    },
    cell: {
      flex: 1,
      fontSize: 15,
      color: colors.text,
      textAlign: "center",
    },
    cellLeft: {
      flex: 1,
      fontSize: 15,
      color: colors.text,
      textAlign: "left",
    },
    cellRight: {
      flex: 1,
      fontSize: 15,
      color: colors.text,
      textAlign: "right",
    },
    cellWrapper: {
      flex: 1,
      justifyContent: "center",
      alignItems: "center",
    },
    headerText: {
      fontWeight: "600",
      color: colors.text,
    },
    footerText: {
      color: colors.primary,
      fontWeight: "600",
    },
    footerTotal: {
      color: colors.warning,
      fontWeight: "800",
    },
    sttCell: {
      flex: 0.3,
      fontSize: 15,
      color: colors.text,
      textAlign: "center",
      paddingLeft: 10,
    },
    statusContainer: {
      flexDirection: "row",
      alignItems: "center",
      justifyContent: "center",
    },
    statusDot: {
      width: 8,
      height: 8,
      borderRadius: 4,
      backgroundColor: colors.success,
      marginRight: 6,
    },
    statusDotPending: {
      width: 8,
      height: 8,
      borderRadius: 4,
      backgroundColor: colors.warning,
      marginRight: 6,
    },
    statusText: {
      fontSize: 15,
      color: colors.primary,
      textDecorationLine: "underline",
    },
    linkText: {
      color: colors.primary,
      textDecorationLine: "underline",
    },
    viewDetailButton: {
      marginTop: 12,
      paddingVertical: 8,
      alignItems: "center",
    },
    viewDetailText: {
      color: colors.primary,
      fontSize: 15,
      fontWeight: "600",
      textDecorationLine: "underline",
    },
    total: {
      color: colors.warning,
      fontWeight: "700",
    },
    right: {
      color: colors.warning,
      fontWeight: "600",
    },
    footerRow: {
      marginTop: 6,
    },
  });
}

export type TableStyles = ReturnType<typeof createTableStyles>;