import {
  extendTheme,
  theme as baseTheme,
  withDefaultColorScheme,
} from "@chakra-ui/react";

const Card = {
  baseStyle: (props: any) => ({
    display: "flex",
    flexDirection: "column",
    background: "neutral",
    transition: "background-color 0.1s linear",
    alignItems: "center",
    borderWidth: "2px",
    borderStyle: "solid",
    borderColor: props.colorMode === "dark" ? "gray.800" : "gray.100",
    gap: 6,
  }),
  // Two variants: rounded and smooth
  variants: {
    rounded: {
      padding: 8,
      borderRadius: "xl",
      boxShadow: "xl",
    },
    smooth: {
      padding: 6,
      borderRadius: "base",
      boxShadow: "md",
    },
  },
  // The default variant value
  defaultProps: {
    variant: "smooth",
  },
};

export const theme = extendTheme(
  {
    colors: {
      yellow: {
        50: "#fff4da",
        100: "#ffe5ad",
        200: "#ffd77d",
        300: "#ffce4b",
        400: "#ffc81a",
        500: "#e69f00",
        600: "#b37000",
        700: "#804700",
        800: "#4e2500",
        900: "#1d0900",
      },
      brand: {
        50: "#f0e3ff",
        100: "#cdb2ff",
        200: "#aa7fff",
        300: "#884dff",
        400: "#661aff",
        500: "#4d00e6",
        600: "#3c00b4",
        700: "#2a0082",
        800: "#190050",
        900: "#0a0020",
      },

      purple: {
        50: "#f0e3ff",
        100: "#cdb2ff",
        200: "#aa7fff",
        300: "#884dff",
        400: "#661aff",
        500: "#4d00e6",
        600: "#3c00b4",
        700: "#2a0082",
        800: "#190050",
        900: "#0a0020",
      },
      gray: {
        "50": "#F2F2F2",
        "100": "#DBDBDB",
        "200": "#C4C4C4",
        "300": "#ADADAD",
        "400": "#969696",
        "500": "#808080",
        "600": "#666666",
        "700": "#4D4D4D",
        "800": "#333333",
        "900": "#1A1A1A",
      },
    },
  },
  {
    semanticTokens: {
      colors: {
        main: {
          default: "black",
          _dark: "white",
        },
        accent: {
          default: "brand.600",
          _dark: "brand.300",
        },
        highlight: {
          default: "yellow.400",
          _dark: "yellow.400",
        },
        neutral: {
          default: "white",
          _dark: "black",
        },
      },
    },
  },
  {
    fonts: {
      heading: "Raleway, sans-serif",
      body: "Inter, sans-serif",
    },
    config: {
      initialColorMode: "dark",
    },

    components: {
      Card,
      Input: {
        defaultProps: {
          focusBorderColor: "brand.200",
        },
      },
    },
    shadows: {
      outline: "0 0 0 3px purple.300",
    },

    styles: {
      global: (props: any) => ({
        body: {
          fontSize: "sm",
          color: props.colorMode === "dark" ? "white" : "gray.600",
          background: props.colorMode === "dark" ? "black" : "white",
          lineHeight: "tall",
        },
        a: {
          color: props.colorMode === "dark" ? "teal.300" : "teal.500",
        },
      }),
    },
  },
  withDefaultColorScheme({ colorScheme: "brand" })
);
