import tokens from '../../design-tokens.json';

import {
  Colors,
  getThemeColors,
  THEME_NAMES,
  type ThemeName,
} from '@/constants/theme-bridge';

function toExpectedThemeColors(
  palette: (typeof tokens.colors)[ThemeName]['light'],
) {
  const colorToHsl = (v: string) => `hsl(${v.replace(/\s+/g, ', ')})`;
  return {
    text: colorToHsl(palette.foreground),
    background: colorToHsl(palette.background),
    backgroundElement: colorToHsl(palette.card),
    backgroundSelected: colorToHsl(palette.accent),
    textSecondary: colorToHsl(palette.mutedForeground),
    border: colorToHsl(palette.border),
    input: colorToHsl(palette.input),
    ring: colorToHsl(palette.ring),
    primary: colorToHsl(palette.primary),
    primaryForeground: colorToHsl(palette.primaryForeground),
    secondary: colorToHsl(palette.secondary),
    secondaryForeground: colorToHsl(palette.secondaryForeground),
    muted: colorToHsl(palette.muted),
    mutedForeground: colorToHsl(palette.mutedForeground),
    accent: colorToHsl(palette.accent),
    accentForeground: colorToHsl(palette.accentForeground),
    card: colorToHsl(palette.card),
    cardForeground: colorToHsl(palette.cardForeground),
    popover: colorToHsl(palette.popover),
    popoverForeground: colorToHsl(palette.popoverForeground),
    destructive: colorToHsl(palette.destructive),
    destructiveForeground: colorToHsl(palette.destructiveForeground),
    success: colorToHsl(palette.success),
    successForeground: colorToHsl(palette.successForeground),
    warning: colorToHsl(palette.warning),
    warningForeground: colorToHsl(palette.warningForeground),
    info: colorToHsl(palette.info),
    infoForeground: colorToHsl(palette.infoForeground),
  };
}

describe('theme bridge', () => {
  test('THEME_NAMES includes all themes from design-tokens', () => {
    expect(THEME_NAMES).toEqual(Object.keys(tokens.colors));
  });

  test('getThemeColors returns correct colors for default theme', () => {
    expect(getThemeColors('default', 'light')).toEqual(
      toExpectedThemeColors(tokens.colors.default.light),
    );
    expect(getThemeColors('default', 'dark')).toEqual(
      toExpectedThemeColors(tokens.colors.default.dark),
    );
  });

  test('getThemeColors returns correct colors for brand theme', () => {
    expect(getThemeColors('brand', 'light')).toEqual(
      toExpectedThemeColors(tokens.colors.brand.light),
    );
    expect(getThemeColors('brand', 'dark')).toEqual(
      toExpectedThemeColors(tokens.colors.brand.dark),
    );
  });

  test('Colors precomputed matches getThemeColors', () => {
    for (const themeName of THEME_NAMES) {
      expect(Colors[themeName].light).toEqual(
        getThemeColors(themeName, 'light'),
      );
      expect(Colors[themeName].dark).toEqual(getThemeColors(themeName, 'dark'));
    }
  });
});