import { DarkTheme, DefaultTheme, type Theme } from '@react-navigation/native';

export const THEME = {
  light: {
    background: 'hsl(0 0% 98%)',
    foreground: 'hsl(0 0% 10.6%)',
    card: 'hsl(0 0% 100%)',
    cardForeground: 'hsl(0 0% 10.6%)',
    popover: 'hsl(0 0% 100%)',
    popoverForeground: 'hsl(0 0% 10.6%)',
    primary: 'hsl(153 42% 30%)',
    primaryForeground: 'hsl(0 0% 100%)',
    secondary: 'hsl(147 46% 89%)',
    secondaryForeground: 'hsl(153 42% 30%)',
    muted: 'hsl(0 0% 96.1%)',
    mutedForeground: 'hsl(0 0% 42%)',
    accent: 'hsl(147 46% 89%)',
    accentForeground: 'hsl(153 42% 30%)',
    destructive: 'hsl(14 100% 63%)',
    border: 'hsl(0 0% 87.8%)',
    input: 'hsl(0 0% 87.8%)',
    ring: 'hsl(153 42% 30%)',
    radius: '0.625rem',
    chart1: 'hsl(153 42% 30%)',
    chart2: 'hsl(147 46% 89%)',
    chart3: 'hsl(282 100% 22%)',
    chart4: 'hsl(37 100% 65%)',
    chart5: 'hsl(14 100% 63%)',
  },
  dark: {
    background: 'hsl(0 0% 6.7%)',
    foreground: 'hsl(0 0% 98%)',
    card: 'hsl(0 0% 10.6%)',
    cardForeground: 'hsl(0 0% 98%)',
    popover: 'hsl(0 0% 10.6%)',
    popoverForeground: 'hsl(0 0% 98%)',
    primary: 'hsl(147 46% 89%)',
    primaryForeground: 'hsl(153 42% 30%)',
    secondary: 'hsl(153 42% 30%)',
    secondaryForeground: 'hsl(147 46% 89%)',
    muted: 'hsl(0 0% 17.6%)',
    mutedForeground: 'hsl(0 0% 61%)',
    accent: 'hsl(153 42% 30%)',
    accentForeground: 'hsl(147 46% 89%)',
    destructive: 'hsl(14 100% 63%)',
    border: 'hsl(0 0% 17.6%)',
    input: 'hsl(0 0% 17.6%)',
    ring: 'hsl(147 46% 89%)',
    radius: '0.625rem',
    chart1: 'hsl(147 46% 89%)',
    chart2: 'hsl(153 42% 30%)',
    chart3: 'hsl(282 100% 50%)',
    chart4: 'hsl(37 100% 65%)',
    chart5: 'hsl(14 100% 63%)',
  },
};

export const NAV_THEME: Record<'light' | 'dark', Theme> = {
  light: {
    ...DefaultTheme,
    colors: {
      background: THEME.light.background,
      border: THEME.light.border,
      card: THEME.light.card,
      notification: THEME.light.destructive,
      primary: THEME.light.primary,
      text: THEME.light.foreground,
    },
  },
  dark: {
    ...DarkTheme,
    colors: {
      background: THEME.dark.background,
      border: THEME.dark.border,
      card: THEME.dark.card,
      notification: THEME.dark.destructive,
      primary: THEME.dark.primary,
      text: THEME.dark.foreground,
    },
  },
};