import type { MantineTheme, MantineThemeOverride } from "@mantine/core";

const commonThemeProperties: Partial<MantineThemeOverride> = {
  fontFamily: [
    "Montserrat",
    "-apple-system",
    "BlinkMacSystemFont",
    '"Segoe UI"',
    "Roboto",
    '"Helvetica Neue"',
    "Arial",
    "sans-serif",
    '"Apple Color Emoji"',
    '"Segoe UI Emoji"',
    '"Segoe UI Symbol"',
  ].join(","),
  colors: {
    primary: [
      "#F1FBE9",
      "#D8F4C3",
      "#BFED9C",
      "#A7E675",
      "#8EDE4E",
      "#75D728",
      "#5DAC20",
      "#468118",
      "#2F5610",
      "#172B08",
    ],
  },
  black: "#626262",
  primaryColor: "primary",
  defaultRadius: 6,
  headings: {
    fontFamily: [
      "Montserrat",
      "-apple-system",
      "BlinkMacSystemFont",
      '"Segoe UI"',
      "Roboto",
      '"Helvetica Neue"',
      "Arial",
      "sans-serif",
      '"Apple Color Emoji"',
      '"Segoe UI Emoji"',
      '"Segoe UI Symbol"',
    ].join(","),
  },
  components: {
    Table: {
      styles: (theme) =>
        theme.colorScheme === "light"
          ? {
              root: {
                "thead>tr>th": {
                  backgroundColor: "#fafafa",
                  padding: "16px 4px",
                },
                "thead>tr>th:first-of-type": {
                  borderTopLeftRadius: theme.defaultRadius,
                },
                "thead>tr>th:last-of-type": {
                  borderTopRightRadius: theme.defaultRadius,
                },
                "tbody>tr>td": {
                  borderBottom: "1px solid #f0f0f0",
                },
              },
            }
          : { root: {} },
    },
  },
};

export const LightTheme: Partial<MantineThemeOverride> = {
  colorScheme: "light",
  ...commonThemeProperties,
};

export const DarkTheme: Partial<MantineThemeOverride> = {
  colorScheme: "dark",
  ...commonThemeProperties,
};

const refineColors = {
  Blue: {
    colors: [
      "#E7F5FF",
      "#D0EBFF",
      "#A5D8FF",
      "#74C0FC",
      "#4DABF7",
      "#339AF0",
      "#228BE6",
      "#1C7ED6",
      "#1971C2",
      "#1864AB",
    ],
  },
  Purple: {
    colors: [
      "#F3F0FF",
      "#E5DBFF",
      "#D0BFFF",
      "#B197FC",
      "#9775FA",
      "#845EF7",
      "#7950F2",
      "#7048E8",
      "#6741D9",
      "#5F3DC4",
    ],
  },
  Magenta: {
    colors: [
      "#FFF0F6",
      "#FFDEEB",
      "#FCC2D7",
      "#FAA2C1",
      "#F783AC",
      "#F06595",
      "#E64980",
      "#D6336C",
      "#C2255C",
      "#A61E4D",
    ],
  },
  Red: {
    colors: [
      "#FFF5F5",
      "#FFE3E3",
      "#FFC9C9",
      "#FFA8A8",
      "#FF8787",
      "#FF6B6B",
      "#FA5252",
      "#F03E3E",
      "#E03131",
      "#C92A2A",
    ],
  },
  Orange: {
    colors: [
      "#FFF4E6",
      "#FFE8CC",
      "#FFD8A8",
      "#FFC078",
      "#FFA94D",
      "#FF922B",
      "#FD7E14",
      "#F76707",
      "#E8590C",
      "#D9480F",
    ],
  },
  Yellow: {
    colors: [
      "#FFF9DB",
      "#FFF3BF",
      "#FFEC99",
      "#FFE066",
      "#FFD43B",
      "#FCC419",
      "#FAB005",
      "#F59F00",
      "#F08C00",
      "#E67700",
    ],
  },
  Green: {
    colors: [
      "#EBFBEE",
      "#D3F9D8",
      "#B2F2BB",
      "#8CE99A",
      "#69DB7C",
      "#51CF66",
      "#40C057",
      "#37B24D",
      "#2F9E44",
      "#2B8A3E",
    ],
  },
} as const;

export const RefineThemes = Object.keys(refineColors).reduce((acc, key) => {
  const themeName = key as keyof typeof refineColors;
  return {
    ...acc,
    [themeName]: {
      globalStyles: (theme: MantineTheme) => ({
        body: {
          backgroundColor:
            theme.colorScheme === "dark"
              ? theme.colors.dark[8]
              : theme.colors.gray[0],
        },
      }),

      colors: {
        brand: refineColors[themeName].colors,
      },
      primaryColor: "brand",
    },
  };
}, {}) as Record<keyof typeof refineColors, MantineThemeOverride>;