import type { Config } from "tailwindcss";
import {
  createTailwindMerge,
  getDefaultConfig,
  validators,
} from "tailwind-merge";

import { palette } from "./src/theme/tokens/colors";
import {
  fontFamily,
  fontSize,
  fontWeight,
  letterSpacing,
  lineHeight,
} from "./src/theme/tokens/typography";
import boxShadow from "./src/theme/tokens/shadow";

const config = {
  content: ["./src/**/*.{ts,tsx}"],
  corePlugins: {
    preflight: false,
  },
  important: "#docoli",
  theme: {
    colors: {
      ...palette,
      transparent: "transparent",
      current: "currentColor",
    },
    fontSize,
    fontWeight: Object.fromEntries(
      Object.entries(fontWeight).map(([key, value]) => [key, String(value)])
    ) as { [key in keyof typeof fontWeight]: string },
    letterSpacing,
    lineHeight,
    fontFamily: { sans: fontFamily },
    boxShadow: {
      ...boxShadow,
      "no-chrome-autofill": "0 0 0 1000px var(--tw-shadow-color) inset",
    },
    ringWidth: {
      2: "2px",
      3: "3px",
    },
    spacing: {
      0: "0",
      2: "2px",
      4: "4px",
      6: "6px",
      8: "8px",
      10: "10px",
      12: "12px",
      16: "16px",
      20: "20px",
      24: "24px",
      28: "28px",
      32: "32px",
      40: "40px",
      48: "48px",
      64: "64px",
    },
    borderRadius: {
      0: "0",
      4: "4px",
      6: "6px",
      8: "8px",
      12: "12px",
      full: "9999px",
    },
    borderWidth: {
      DEFAULT: "1px",
      0: "0",
      1: "1px",
      2: "2px",
    },
    backgroundImage: {
      none: "none",
      overlay: "linear-gradient(var(--tw-gradient-stops))",
    },
    extend: {
      transitionProperty: {
        padding: "padding",
      },
    },
  },
  plugins: [],
} satisfies Config;

export const twMerge = createTailwindMerge(() => {
  const defaultConfig = getDefaultConfig();

  return {
    ...defaultConfig,
    theme: {
      ...defaultConfig.theme,
      colors: Object.keys(config.theme.colors),
    },
    classGroups: {
      ...defaultConfig.classGroups,
      "font-size": [
        {
          text: [
            ...Object.keys(config.theme.fontSize),
            validators.isArbitraryLength,
          ],
        },
      ],
      "font-weight": [
        {
          font: Object.keys(config.theme.fontWeight),
        },
      ],
      "letter-spacing": [
        {
          tracking: [
            ...Object.keys(config.theme.letterSpacing),
            validators.isArbitraryLength,
          ],
        },
      ],
      "line-height": [
        {
          leading: [
            ...Object.keys(config.theme.lineHeight),
            validators.isArbitraryLength,
          ],
        },
      ],
      shadow: [
        ...Object.keys(config.theme.boxShadow),
        validators.isArbitraryShadow,
      ],
      rounded: [
        {
          rounded: [
            ...Object.keys(config.theme.borderRadius),
            validators.isArbitraryLength,
          ],
        },
      ],
      "bg-image": [...defaultConfig.classGroups["bg-image"], "overlay"],
      transition: [...defaultConfig.classGroups.transition, "padding"],
    },
  };
});

export default config;
