import { globalStyle } from "@vanilla-extract/css";
import { themeVars } from "./vars.css";

export type Theme = {
  bg: string;
  bgSecondary: string;
  bgTertiary: string;
  fg: string;
  fgSecondary: string;
  fgTertiary: string;
  primary: string;
  primaryDim: string;
  accent: string;
  accentDim: string;
  error: string;
  warning: string;
  info: string;
  success: string;
};

export const THEME_KEYS = ["--color"];

export const themes: Record<string, Theme> = {
  yuu: {
    bg: "#191310",
    bgSecondary: "#231b18",
    bgTertiary: "#3c2e2a",
    fg: "#f5ece3",
    fgSecondary: "#cfc3b7",
    fgTertiary: "#a69890",
    primary: "#e5846a",
    primaryDim: "#c06b52",
    accent: "#f0c84a",
    accentDim: "#d0aa38",
    error: "#d46260",
    warning: "#e8a840",
    success: "#7ab87a",
    info: "#7aadd4",
  },
  varia: {
    bg: "#19191d",
    bgSecondary: "#1D1D24",
    bgTertiary: "#343442",
    fg: "#edeef2",
    fgSecondary: "#a8a8b4",
    fgTertiary: "#848492",
    primary: "#D073F5",
    primaryDim: "#9850be",
    accent: "#f0ad0a",
    accentDim: "#c88c08",
    error: "#F06767",
    warning: "#f07828",
    success: "#48b058",
    info: "#4090e8",
  },
  midnight: {
    bg: "#080B10",
    bgSecondary: "#0A121C",
    bgTertiary: "#1A2E47",
    fg: "#dbdfe7",
    fgSecondary: "#9ea3a8",
    fgTertiary: "#444E61",
    primary: "#1a97eb",
    primaryDim: "#2680aa",
    accent: "#f0ad0a",
    accentDim: "#d08d08",
    error: "#FC6558",
    warning: "#ff9800",
    success: "#4caf50",
    info: "#2196f3",
  },
  catppuccin: {
    bg: "#181825",
    bgSecondary: "#1e1e2e",
    bgTertiary: "#313244",
    fg: "#cdd6f4",
    fgSecondary: "#a6adc8",
    fgTertiary: "#7f849c",
    primary: "#cba6f7",
    primaryDim: "#a07fd4",
    accent: "#89b4fa",
    accentDim: "#6090e0",
    error: "#f38ba8",
    warning: "#fab387",
    success: "#a6e3a1",
    info: "#74c7ec",
  },
  autumn: {
    bg: "#2c1912",
    bgSecondary: "#361E12",
    bgTertiary: "#5E3321",
    fg: "#fef9f3",
    fgSecondary: "#dbc6b0",
    fgTertiary: "#a3917a",
    primary: "#f0850a",
    primaryDim: "#b45309",
    accent: "#e8c050",
    accentDim: "#c09828",
    error: "#F57B67",
    warning: "#d89820",
    success: "#6e9025",
    info: "#9870c8",
  },
  black: {
    bg: "#000000",
    bgSecondary: "#0A0A0A",
    bgTertiary: "#2a2a2a",
    fg: "#dddddd",
    fgSecondary: "#aaaaaa",
    fgTertiary: "#888888",
    primary: "#08c08c",
    primaryDim: "#08c08c",
    accent: "#f0ad0a",
    accentDim: "#d08d08",
    error: "#FC7B72",
    warning: "#ff9800",
    success: "#4caf50",
    info: "#2196f3",
  },
  wine: {
    bg: "#1e121a",
    bgSecondary: "#271620",
    bgTertiary: "#452A36",
    fg: "#f8d8ab",
    fgSecondary: "#c1a378",
    fgTertiary: "#9e8460",
    primary: "#df7d6c",
    primaryDim: "#b86459",
    accent: "#f5df85",
    accentDim: "#c8a84a",
    error: "#e08282",
    warning: "#d4a84a",
    success: "#7ec490",
    info: "#80b8d8",
  },
  pearl: {
    bg: "#FAFAFA",
    bgSecondary: "#F5F5F5",
    bgTertiary: "#D9DDDE",
    fg: "#0E121C",
    fgSecondary: "#3D4759",
    fgTertiary: "#6D7587",
    primary: "#4D9FEB",
    primaryDim: "#5796D4",
    accent: "#e8a820",
    accentDim: "#c07e10",
    error: "#dc3030",
    warning: "#d06020",
    success: "#1a9440",
    info: "#0e7db8",
  },
  rosebud: {
    bg: "#220c16",
    bgSecondary: "#321020",
    bgTertiary: "#5E2735",
    fg: "#f2c8d2",
    fgSecondary: "#c28490",
    fgTertiary: "#9e6070",
    primary: "#de5e9e",
    primaryDim: "#b24c80",
    accent: "#f5d080",
    accentDim: "#c89848",
    error: "#e04868",
    warning: "#eda070",
    success: "#68b898",
    info: "#68a8ce",
  },
  urim: {
    bg: "#0e1510",
    bgSecondary: "#131C13",
    bgTertiary: "#243520",
    fg: "#dce8c0",
    fgSecondary: "#a0b87a",
    fgTertiary: "#728858",
    primary: "#e8d000",
    primaryDim: "#b8a010",
    accent: "#3ec8a8",
    accentDim: "#2a9880",
    error: "#F06A56",
    warning: "#e89828",
    success: "#52b864",
    info: "#4898d8",
  },
  match: {
    bg: "#071014",
    bgSecondary: "#0A181E",
    bgTertiary: "#152E3B",
    fg: "#ebeaeb",
    fgSecondary: "#BDBDBD",
    fgTertiary: "#A2A2A2",
    primary: "#fda827",
    primaryDim: "#C78420",
    accent: "#277CFD",
    accentDim: "#1F60C1",
    error: "#F06F56",
    warning: "#FFC107",
    success: "#28A745",
    info: "#17A2B8",
  },
  lemon: {
    bg: "#1a171a",
    bgSecondary: "#201c20",
    bgTertiary: "#302b30",
    fg: "#e6e2dc",
    fgSecondary: "#b2aca1",
    fgTertiary: "#968f82",
    primary: "#f5c737",
    primaryDim: "#c29d2f",
    accent: "#277cfd",
    accentDim: "#1f60c1",
    error: "#ED7F6F",
    warning: "#e89020",
    success: "#48b058",
    info: "#2090c0",
  },
};

export default themes;

Object.entries(themes).forEach(([name, theme]) => {
  const selector = `[data-theme="${name}"]`;

  globalStyle(selector, {
    vars: {
      [themeVars.bg]: theme.bg,
      [themeVars.bgSecondary]: theme.bgSecondary,
      [themeVars.bgTertiary]: theme.bgTertiary,
      [themeVars.fg]: theme.fg,
      [themeVars.fgSecondary]: theme.fgSecondary,
      [themeVars.fgTertiary]: theme.fgTertiary,
      [themeVars.primary]: theme.primary,
      [themeVars.primaryDim]: theme.primaryDim,
      [themeVars.accent]: theme.accent,
      [themeVars.accentDim]: theme.accentDim,
      [themeVars.error]: theme.error,
      [themeVars.warning]: theme.warning,
      [themeVars.success]: theme.success,
      [themeVars.info]: theme.info,
    },
  });
});
