import classicDark from '@swipebox/morphe-design-tokens/dist/json/classic/variables-dark.json';
import classicLight from '@swipebox/morphe-design-tokens/dist/json/classic/variables-light.json';
import vrDark from '@swipebox/morphe-design-tokens/dist/json/vr-theme-web-mapping/variables-dark.json';
import vrCk from '@swipebox/morphe-design-tokens/dist/json/vr-theme-web-mapping/variables-font-lineheight-ck.json';
import vrDefault from '@swipebox/morphe-design-tokens/dist/json/vr-theme-web-mapping/variables-font-lineheight-default.json';
import vrJa from '@swipebox/morphe-design-tokens/dist/json/vr-theme-web-mapping/variables-font-lineheight-ja.json';
import vrTall from '@swipebox/morphe-design-tokens/dist/json/vr-theme-web-mapping/variables-font-lineheight-tall.json';
import vrTh from '@swipebox/morphe-design-tokens/dist/json/vr-theme-web-mapping/variables-font-lineheight-th.json';
import vrVi from '@swipebox/morphe-design-tokens/dist/json/vr-theme-web-mapping/variables-font-lineheight-vi.json';
import vrLight from '@swipebox/morphe-design-tokens/dist/json/vr-theme-web-mapping/variables-light.json';
import useExperimentalTheme from '../utils/useExperimentalTheme';

// Helper to filter color tokens from a token object
const filterColorTokens = (tokens: Record<string, string>) => {
  return Object.fromEntries(
    Object.entries(tokens).filter(([key]) => key.startsWith('color-'))
  );
};

const themes = {
  classic: { name: 'classic', light: classicLight, dark: classicDark },
  visualrefresh: {
    name: 'visualrefresh',
    light: vrLight,
    dark: vrDark,
    default: vrDefault,
    tall: vrTall,
    ck: vrCk,
    ja: vrJa,
    th: vrTh,
    vi: vrVi,
  },
  calico01: {
    name: 'calico01',
    light: vrLight,
    dark: vrDark,
    default: vrDefault,
    tall: vrTall,
    ck: vrCk,
    ja: vrJa,
    th: vrTh,
    vi: vrVi,
  },
  // Hybrid theme: VR roundness/structure + Classic colors
  hybrid: {
    name: 'visualrefresh',
    light: { ...vrLight, ...filterColorTokens(classicLight) },
    dark: { ...vrDark, ...filterColorTokens(classicDark) },
    default: vrDefault,
    tall: vrTall,
    ck: vrCk,
    ja: vrJa,
    th: vrTh,
    vi: vrVi,
  },
} as const;

const useDesignTokens = ({
  forceTheme,
}: {
  forceTheme?: 'classic' | 'visualrefresh' | 'calico01' | 'hybrid';
}) => {
  const theme = useExperimentalTheme();

  let selectedTheme: 'classic' | 'visualrefresh' | 'calico01' | 'hybrid' = forceTheme ?? 'hybrid';

  if (!forceTheme && theme.VR01) {
    selectedTheme = 'visualrefresh';
  }
  if (!forceTheme && theme.CA01) {
    selectedTheme = 'calico01';
  }

  return themes[selectedTheme];
};

export default useDesignTokens;