import { themeColorsToCssVariables } from "@/lib/charts"

const _THEMES = [
  {
    name: "Default",
    id: "default-shadcn",
    colors: {
      background: "0 0% 100%",
      foreground: "240 10% 3.9%",
      card: "0 0% 100%",
      "card-foreground": "240 10% 3.9%",
      popover: "0 0% 100%",
      "popover-foreground": "240 10% 3.9%",
      primary: "240 5.9% 10%",
      "primary-foreground": "0 0% 98%",
      secondary: "240 4.8% 95.9%",
      "secondary-foreground": "240 5.9% 10%",
      muted: "240 4.8% 95.9%",
      "muted-foreground": "240 3.8% 46.1%",
      accent: "240 4.8% 95.9%",
      "accent-foreground": "240 5.9% 10%",
      destructive: "0 84.2% 60.2%",
      "destructive-foreground": "0 0% 98%",
      border: "240 5.9% 90%",
      input: "240 5.9% 90%",
      ring: "240 10% 3.9%",
      "chart-1": "173 58% 39%",
      "chart-2": "12 76% 61%",
      "chart-3": "197 37% 24%",
      "chart-4": "43 74% 66%",
      "chart-5": "27 87% 67%",
    },
    colorsDark: {
      background: "240 10% 3.9%",
      foreground: "0 0% 98%",
      card: "240 10% 3.9%",
      "card-foreground": "0 0% 98%",
      popover: "240 10% 3.9%",
      "popover-foreground": "0 0% 98%",
      primary: "0 0% 98%",
      "primary-foreground": "240 5.9% 10%",
      secondary: "240 3.7% 15.9%",
      "secondary-foreground": "0 0% 98%",
      muted: "240 3.7% 15.9%",
      "muted-foreground": "240 5% 64.9%",
      accent: "240 3.7% 15.9%",
      "accent-foreground": "0 0% 98%",
      destructive: "0 62.8% 30.6%",
      "destructive-foreground": "0 0% 98%",
      border: "240 3.7% 15.9%",
      input: "240 3.7% 15.9%",
      ring: "240 4.9% 83.9%",
      "chart-1": "220 70% 50%",
      "chart-5": "160 60% 45%",
      "chart-3": "30 80% 55%",
      "chart-4": "280 65% 60%",
      "chart-2": "340 75% 55%",
    },
    fontFamily: {
      heading: {
        name: "Inter",
        type: "sans-serif",
      },
      body: {
        name: "Inter",
        type: "sans-serif",
      },
    },
    radius: 0.5,
  },
  {
    name: "Palette",
    id: "default-palette",
    colors: {
      background: "0 0% 100%",
      foreground: "240 10% 3.9%",
      card: "0 0% 100%",
      "card-foreground": "240 10% 3.9%",
      popover: "0 0% 100%",
      "popover-foreground": "240 10% 3.9%",
      primary: "240 5.9% 10%",
      "primary-foreground": "0 0% 98%",
      secondary: "240 4.8% 95.9%",
      "secondary-foreground": "240 5.9% 10%",
      muted: "240 4.8% 95.9%",
      "muted-foreground": "240 3.8% 46.1%",
      accent: "240 4.8% 95.9%",
      "accent-foreground": "240 5.9% 10%",
      destructive: "0 84.2% 60.2%",
      "destructive-foreground": "0 0% 98%",
      border: "240 5.9% 90%",
      input: "240 5.9% 90%",
      ring: "240 10% 3.9%",
      "chart-1": "12 76% 61%",
      "chart-2": "173 58% 39%",
      "chart-3": "197 37% 24%",
      "chart-4": "43 74% 66%",
      "chart-5": "27 87% 67%",
    },
    colorsDark: {
      background: "240 10% 3.9%",
      foreground: "0 0% 98%",
      card: "240 10% 3.9%",
      "card-foreground": "0 0% 98%",
      popover: "240 10% 3.9%",
      "popover-foreground": "0 0% 98%",
      primary: "0 0% 98%",
      "primary-foreground": "240 5.9% 10%",
      secondary: "240 3.7% 15.9%",
      "secondary-foreground": "0 0% 98%",
      muted: "240 3.7% 15.9%",
      "muted-foreground": "240 5% 64.9%",
      accent: "240 3.7% 15.9%",
      "accent-foreground": "0 0% 98%",
      destructive: "0 62.8% 30.6%",
      "destructive-foreground": "0 0% 98%",
      border: "240 3.7% 15.9%",
      input: "240 3.7% 15.9%",
      ring: "240 4.9% 83.9%",
      "chart-1": "220 70% 50%",
      "chart-2": "160 60% 45%",
      "chart-3": "30 80% 55%",
      "chart-4": "280 65% 60%",
      "chart-5": "340 75% 55%",
    },
    fontFamily: {
      heading: {
        name: "Inter",
        type: "sans-serif",
      },
      body: {
        name: "Inter",
        type: "sans-serif",
      },
    },
    radius: 0.5,
  },
  {
    name: "Sapphire",
    id: "default-sapphire",
    colors: {
      background: "0 0% 100%",
      foreground: "222.2 84% 4.9%",
      card: "0 0% 100%",
      cardForeground: "222.2 84% 4.9%",
      popover: "0 0% 100%",
      popoverForeground: "222.2 84% 4.9%",
      primary: "221.2 83.2% 53.3%",
      primaryForeground: "210 40% 98%",
      secondary: "210 40% 96.1%",
      secondaryForeground: "222.2 47.4% 11.2%",
      muted: "210 40% 96.1%",
      mutedForeground: "215.4 16.3% 44%",
      accent: "210 40% 96.1%",
      accentForeground: "222.2 47.4% 11.2%",
      destructive: "0 72% 51%",
      destructiveForeground: "210 40% 98%",
      border: "214.3 31.8% 91.4%",
      input: "214.3 31.8% 91.4%",
      ring: "221.2 83.2% 53.3%",
      "chart-1": "221.2 83.2% 53.3%",
      "chart-2": "212 95% 68%",
      "chart-3": "216 92% 60%",
      "chart-4": "210 98% 78%",
      "chart-5": "212 97% 87%",
    },
    colorsDark: {
      background: "240 10% 3.9%",
      foreground: "0 0% 98%",
      card: "240 10% 3.9%",
      "card-foreground": "0 0% 98%",
      popover: "240 10% 3.9%",
      "popover-foreground": "0 0% 98%",
      primary: "221.2 83.2% 53.3%",
      primaryForeground: "210 40% 98%",
      secondary: "210 40% 96.1%",
      secondaryForeground: "222.2 47.4% 11.2%",
      muted: "240 3.7% 15.9%",
      "muted-foreground": "240 5% 64.9%",
      accent: "240 3.7% 15.9%",
      "accent-foreground": "0 0% 98%",
      destructive: "0 72% 51%",
      destructiveForeground: "210 40% 98%",
      border: "240 3.7% 15.9%",
      input: "240 3.7% 15.9%",
      ring: "221.2 83.2% 53.3%",
      "chart-1": "221.2 83.2% 53.3%",
      "chart-2": "212 95% 68%",
      "chart-3": "216 92% 60%",
      "chart-4": "210 98% 78%",
      "chart-5": "212 97% 87%",
    },
    fontFamily: {
      heading: {
        name: "Inter",
        type: "sans-serif",
      },
      body: {
        name: "Inter",
        type: "sans-serif",
      },
    },
    radius: 0.5,
  },
  {
    name: "Ruby",
    id: "default-ruby",
    colors: {
      background: "0 0% 100%",
      foreground: "240 10% 3.9%",
      card: "0 0% 100%",
      cardForeground: "240 10% 3.9%",
      popover: "0 0% 100%",
      popoverForeground: "240 10% 3.9%",
      primary: "346.8 77.2% 49.8%",
      primaryForeground: "355.7 100% 99%",
      secondary: "240 4.8% 95.9%",
      secondaryForeground: "240 5.9% 10%",
      muted: "240 4.8% 95.9%",
      mutedForeground: "240 3.8% 45%",
      accent: "240 4.8% 95.9%",
      accentForeground: "240 5.9% 10%",
      destructive: "0 72% 51%",
      destructiveForeground: "0 0% 98%",
      border: "240 5.9% 90%",
      input: "240 5.9% 90%",
      ring: "346.8 77.2% 49.8%",
      "chart-1": "347 77% 50%",
      "chart-2": "352 83% 91%",
      "chart-3": "350 80% 72%",
      "chart-4": "351 83% 82%",
      "chart-5": "349 77% 62%",
    },
    colorsDark: {
      background: "240 10% 3.9%",
      foreground: "0 0% 98%",
      card: "240 10% 3.9%",
      "card-foreground": "0 0% 98%",
      popover: "240 10% 3.9%",
      "popover-foreground": "0 0% 98%",
      primary: "346.8 77.2% 49.8%",
      primaryForeground: "355.7 100% 99%",
      secondary: "240 4.8% 95.9%",
      secondaryForeground: "240 5.9% 10%",
      muted: "240 3.7% 15.9%",
      "muted-foreground": "240 5% 64.9%",
      accent: "240 3.7% 15.9%",
      "accent-foreground": "0 0% 98%",
      destructive: "0 72% 51%",
      destructiveForeground: "0 0% 98%",
      border: "240 3.7% 15.9%",
      input: "240 3.7% 15.9%",
      ring: "221.2 83.2% 53.3%",
      "chart-1": "347 77% 50%",
      "chart-2": "349 77% 62%",
      "chart-3": "350 80% 72%",
      "chart-4": "351 83% 82%",
      "chart-5": "352 83% 91%",
    },
    fontFamily: {
      heading: {
        name: "Inter",
        type: "sans-serif",
      },
      body: {
        name: "Inter",
        type: "sans-serif",
      },
    },
    radius: 0.5,
  },
  {
    name: "Emerald",
    id: "default-emerald",
    colors: {
      background: "0 0% 100%",
      foreground: "240 10% 3.9%",
      card: "0 0% 100%",
      cardForeground: "240 10% 3.9%",
      popover: "0 0% 100%",
      popoverForeground: "240 10% 3.9%",
      primary: "142 86% 28%",
      primaryForeground: "356 29% 98%",
      secondary: "240 4.8% 95.9%",
      secondaryForeground: "240 5.9% 10%",
      muted: "240 4.8% 95.9%",
      mutedForeground: "240 3.8% 45%",
      accent: "240 4.8% 95.9%",
      accentForeground: "240 5.9% 10%",
      destructive: "0 72% 51%",
      destructiveForeground: "0 0% 98%",
      border: "240 5.9% 90%",
      input: "240 5.9% 90%",
      ring: "142 86% 28%",
      "chart-1": "139 65% 20%",
      "chart-2": "140 74% 44%",
      "chart-3": "142 88% 28%",
      "chart-4": "137 55% 15%",
      "chart-5": "141 40% 9%",
    },
    colorsDark: {
      background: "240 10% 3.9%",
      foreground: "0 0% 98%",
      card: "240 10% 3.9%",
      "card-foreground": "0 0% 98%",
      popover: "240 10% 3.9%",
      "popover-foreground": "0 0% 98%",
      primary: "142 86% 28%",
      primaryForeground: "356 29% 98%",
      secondary: "240 4.8% 95.9%",
      secondaryForeground: "240 5.9% 10%",
      muted: "240 3.7% 15.9%",
      "muted-foreground": "240 5% 64.9%",
      accent: "240 3.7% 15.9%",
      "accent-foreground": "0 0% 98%",
      destructive: "0 72% 51%",
      destructiveForeground: "0 0% 98%",
      border: "240 3.7% 15.9%",
      input: "240 3.7% 15.9%",
      ring: "142 86% 28%",
      "chart-1": "142 88% 28%",
      "chart-2": "139 65% 20%",
      "chart-3": "140 74% 24%",
      "chart-4": "137 55% 15%",
      "chart-5": "141 40% 9%",
    },
    fontFamily: {
      heading: {
        name: "Inter",
        type: "sans-serif",
      },
      body: {
        name: "Inter",
        type: "sans-serif",
      },
    },
    radius: 0.5,
  },
  {
    name: "Daylight",
    id: "default-daylight",
    colors: {
      background: "36 39% 88%",
      foreground: "36 45% 15%",
      primary: "36 45% 70%",
      primaryForeground: "36 45% 11%",
      secondary: "40 35% 77%",
      secondaryForeground: "36 45% 25%",
      accent: "36 64% 57%",
      accentForeground: "36 72% 17%",
      destructive: "0 84% 37%",
      destructiveForeground: "0 0% 98%",
      muted: "36 33% 75%",
      mutedForeground: "36 45% 25%",
      card: "36 46% 82%",
      cardForeground: "36 45% 20%",
      popover: "0 0% 100%",
      popoverForeground: "240 10% 3.9%",
      border: "36 45% 60%",
      input: "36 45% 60%",
      ring: "36 45% 30%",
      "chart-1": "25 34% 28%",
      "chart-2": "26 36% 34%",
      "chart-3": "28 40% 40%",
      "chart-4": "31 41% 48%",
      "chart-5": "35 43% 53%",
    },
    colorsDark: {
      background: "36 39% 88%",
      foreground: "36 45% 15%",
      primary: "36 45% 70%",
      primaryForeground: "36 45% 11%",
      secondary: "40 35% 77%",
      secondaryForeground: "36 45% 25%",
      accent: "36 64% 57%",
      accentForeground: "36 72% 17%",
      destructive: "0 84% 37%",
      destructiveForeground: "0 0% 98%",
      muted: "36 33% 75%",
      mutedForeground: "36 45% 25%",
      card: "36 46% 82%",
      cardForeground: "36 45% 20%",
      popover: "0 0% 100%",
      popoverForeground: "240 10% 3.9%",
      border: "36 45% 60%",
      input: "36 45% 60%",
      ring: "36 45% 30%",
      "chart-1": "25 34% 28%",
      "chart-2": "26 36% 34%",
      "chart-3": "28 40% 40%",
      "chart-4": "31 41% 48%",
      "chart-5": "35 43% 53%",
    },
    fontFamily: {
      heading: {
        name: "DM Sans",
        type: "sans-serif",
      },
      body: {
        name: "Space Mono",
        type: "monospace",
      },
    },
  },
  {
    name: "Midnight",
    id: "default-midnight",
    colors: {
      background: "240 5% 6%",
      foreground: "60 5% 90%",
      primary: "240 0% 90%",
      primaryForeground: "60 0% 0%",
      secondary: "240 4% 15%",
      secondaryForeground: "60 5% 85%",
      accent: "240 0% 13%",
      accentForeground: "60 0% 100%",
      destructive: "0 60% 50%",
      destructiveForeground: "0 0% 98%",
      muted: "240 5% 25%",
      mutedForeground: "60 5% 85%",
      card: "240 4% 10%",
      cardForeground: "60 5% 90%",
      popover: "240 5% 15%",
      popoverForeground: "60 5% 85%",
      border: "240 6% 20%",
      input: "240 6% 20%",
      ring: "240 5% 90%",
      "chart-1": "359 2% 90%",
      "chart-2": "240 1% 74%",
      "chart-3": "240 1% 58%",
      "chart-4": "240 1% 42%",
      "chart-5": "240 2% 26%",
    },
    colorsDark: {
      background: "240 5% 6%",
      foreground: "60 5% 90%",
      primary: "240 0% 90%",
      primaryForeground: "60 0% 0%",
      secondary: "240 4% 15%",
      secondaryForeground: "60 5% 85%",
      accent: "240 0% 13%",
      accentForeground: "60 0% 100%",
      destructive: "0 60% 50%",
      destructiveForeground: "0 0% 98%",
      muted: "240 5% 25%",
      mutedForeground: "60 5% 85%",
      card: "240 4% 10%",
      cardForeground: "60 5% 90%",
      popover: "240 5% 15%",
      popoverForeground: "60 5% 85%",
      border: "240 6% 20%",
      input: "240 6% 20%",
      ring: "240 5% 90%",
      "chart-1": "359 2% 90%",
      "chart-2": "240 1% 74%",
      "chart-3": "240 1% 58%",
      "chart-4": "240 1% 42%",
      "chart-5": "240 2% 26%",
    },
    fontFamily: {
      heading: {
        name: "Manrope",
        type: "sans-serif",
      },
      body: {
        name: "Manrope",
        type: "sans-serif",
      },
    },
    radius: 0.5,
  },
] as const

export const THEMES = _THEMES.map((theme) => ({
  ...theme,
  cssVars: {
    light: themeColorsToCssVariables(theme.colors),
    dark: themeColorsToCssVariables(theme.colorsDark),
  },
}))

export type Theme = (typeof THEMES)[number]