import React, { ReactNode } from 'react';
import { ThemeProvider as EmotionThemeProvider, Theme } from '@emotion/react';
import { useTheme } from 'hooks/theme';
import { themes, ThemeMode } from 'theme';

export const ThemeContext = React.createContext<ThemeContextType>({
  theme: themes.light,
  activeThemeMode: 'light',
  updateThemeMode: () => null,
});

export const ThemeProvider: React.FC<ThemeProps> = ({ children }) => {
  const { updateThemeMode, theme, themeMode, activeThemeMode } = useTheme();

  return (
    <ThemeContext.Provider value={{ updateThemeMode, theme, themeMode, activeThemeMode }}>
      <EmotionThemeProvider theme={theme}>{children}</EmotionThemeProvider>
    </ThemeContext.Provider>
  );
};

export interface ThemeContextType {
  themeMode?: ThemeMode | null;
  theme: Theme;
  activeThemeMode: ThemeMode;
  updateThemeMode: (colorScheme: ThemeMode | null) => void;
}

interface ThemeProps {
  children?: ReactNode;
}