import { extendTheme } from "@chakra-ui/react";

const fonts = {
  body: "monospace",
  heading: "monospace",
};

const styles = {
  global: {
    body: {
      fontFamily: fonts.body,
      bg: "background.primary",
      color: "text.primary",
      margin: 0,
      overflow: "hidden",
    },
    html: {
      overflow: "hidden",
    },
    "::selection": {
      backgroundColor: "accent.secondary",
      color: "background.primary",
    },
  },
};

const components = {
  Button: {
    baseStyle: {
      fontWeight: "bold",
      borderRadius: "md", // Slightly rounded corners
    },
    variants: {
      solid: {
        bg: "accent.primary",
        color: "background.primary",
        _hover: {
          bg: "accent.primary",
          color: "background.primary",
        },
      },
      outline: {
        borderColor: "accent.primary",
        color: "text.primary",
        _hover: {
          bg: "accent.primary",
          color: "background.primary",
        },
      },
      ghost: {
        color: "text.primary",
        _hover: {
          bg: "background.secondary",
        },
      },
    },
  },
  Link: {
    baseStyle: {
      color: "accent.secondary",
      _hover: {
        color: "accent.primary",
        textDecoration: "none",
      },
    },
  },
  Heading: {
    baseStyle: {
      color: "text.primary",
      letterSpacing: "tight",
    },
    sizes: {
      "4xl": { fontSize: ["6xl", null, "7xl"], lineHeight: 1 },
      "3xl": { fontSize: ["5xl", null, "6xl"], lineHeight: 1.2 },
      "2xl": { fontSize: ["4xl", null, "5xl"] },
      xl: { fontSize: ["3xl", null, "4xl"] },
      lg: { fontSize: ["2xl", null, "3xl"] },
      md: { fontSize: "xl" },
      sm: { fontSize: "md" },
      xs: { fontSize: "sm" },
    },
  },
  Text: {
    baseStyle: {
      color: "text.primary",
    },
    variants: {
      secondary: {
        color: "text.secondary",
      },
      accent: {
        color: "text.accent",
      },
    },
  },
  Input: {
    variants: {
      filled: {
        field: {
          bg: "background.secondary",
          _hover: {
            bg: "background.tertiary",
          },
          _focus: {
            bg: "background.tertiary",
            borderColor: "accent.primary",
          },
        },
      },
    },
  },
  MDXEditor: {
    baseStyle: (props) => ({
      border: "1px solid",
      borderColor: "text.primary",
      borderRadius: "lg",
      height: "sm",
      bg: "background.primary",
      color: "text.primary",
      boxShadow: "md",
      // p: 4,

      ".mdxeditor-toolbar": {
        border: "1px solid",
        borderColor: "text.primary",
        borderRadius: "xl",
        bg: "background.primary",
        m: 2,
        p: 2,
        // mb: 3,
        // p: 3,

        "& button": {
          border: "none",
          borderRadius: "md",
          cursor: "pointer",
          px: 3,
          py: 1,
          mr: 2,
          transition: "all 0.3s ease",

          _hover: {
            bg: "text.secondary",
          },
          _active: {
            bg: "background.primary",
            color: "text.primary",
          },
          '&[data-state="on"]': {
            bg: "transparent",
            fill: "text.primary",
            stroke: "text.primary",
            boxShadow: "0 0 0 2px var(--text-primary)",
            transform: "translateY(-1px)",
            transition: "all 0.2s ease",
            // border: '2px solid transparent', // No border needed for SVG
          },
          '&[data-state="off"]': {
            bg: "transparent",
            fill: "text.secondary",
            stroke: "text.secondary",
            opacity: 0.8,
            transition: "all 0.2s ease",
          },
        },
      },

      "[aria-label='editable markdown']": {
        color: "text.primary",
      },
    }),
  },
  CodeBlocks: {
    baseStyle: (props) => ({
      bg: "background.primary",
      // color: 'text.primary',
    }),
  },
};

const Base_theme = extendTheme({
  config: {
    cssVarPrefix: "wgs",
    initialColorMode: "dark",
    useSystemColorMode: false,
  },
  fonts,
  styles,
  components,
  letterSpacings: {
    tighter: "-0.05em",
    tight: "-0.025em",
    normal: "0",
    wide: "0.025em",
    wider: "0.05em",
    widest: "0.1em",
  },
  space: {
    px: "1px",
    0.5: "0.125rem",
    1: "0.25rem",
    1.5: "0.375rem",
    2: "0.5rem",
    2.5: "0.625rem",
    3: "0.75rem",
    3.5: "0.875rem",
    4: "1rem",
    5: "1.25rem",
    6: "1.5rem",
    7: "1.75rem",
    8: "2rem",
    9: "2.25rem",
    10: "2.5rem",
    12: "3rem",
    14: "3.5rem",
    16: "4rem",
    18: "4.5rem",
    20: "5rem",
    22: "5.5rem",
    24: "6rem",
    28: "7rem",
    32: "8rem",
    34: "8.5rem",
    36: "9rem",
    38: "9.5rem",
    40: "10rem",
    44: "11rem",
    48: "12rem",
    52: "13rem",
    56: "14rem",
    60: "15rem",
    64: "16rem",
    72: "18rem",
    80: "20rem",
    96: "24rem",
  },
});

export default Base_theme;