import type { PropsWithChildren } from 'react';
import React, { useMemo } from 'react';

import getTheme from './getTheme';
import {
  defaultScale,
  swagSystemPalette,
  workSystemPalette,
  jobsSystemPalette,
  walletSystemPalette,
  eBensSystemPalette,
  swagDarkSystemPalette,
  ehWorkDarkSystemPalette,
  swagLightSystemPalette,
  swagLightJobsSystemPalette,
} from './global';
import ThemeProvider from './ThemeProvider';

type ThemeName =
  | 'swag'
  | 'swagDark'
  | 'swagLight'
  | 'work'
  | 'jobs'
  | 'wallet'
  | 'eBens'
  | 'ehWorkDark'
  | 'ehWork'
  | 'ehJobs';

const ThemeSwitcher = ({
  name = 'swag',
  children,
}: {
  name?: ThemeName;
  children: React.ReactNode;
}) => {
  const theme = useMemo(() => {
    switch (name) {
      case 'swag':
        return getTheme(defaultScale, swagSystemPalette);
      case 'work':
        return getTheme(defaultScale, workSystemPalette);
      case 'jobs':
        return getTheme(defaultScale, jobsSystemPalette);
      case 'wallet':
        return getTheme(defaultScale, walletSystemPalette);
      case 'eBens':
        return getTheme(defaultScale, eBensSystemPalette);
      case 'swagDark':
        return getTheme(defaultScale, swagDarkSystemPalette);
      case 'swagLight':
      case 'ehWork':
        return getTheme(defaultScale, swagLightSystemPalette);
      case 'ehWorkDark':
        return getTheme(defaultScale, ehWorkDarkSystemPalette);
      case 'ehJobs':
        return getTheme(defaultScale, swagLightJobsSystemPalette);
    }
  }, [name]);
  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
};

export const withTheme =
  <P extends Record<string, unknown>>(
    C: React.ComponentType<P>,
    themeName: ThemeName
  ) =>
  (props: PropsWithChildren<P>) => {
    return (
      <ThemeSwitcher name={themeName}>
        <C {...props} />
      </ThemeSwitcher>
    );
  };
export default ThemeSwitcher;