'use client';
import { useMemo, useEffect } from 'react';
import Cookies from 'js-cookie';
import { useState, createContext, useContext } from 'react';
import { createTheme } from '@mui/material';
import { darkTheme, lightTheme } from '@/theme';
import { ThemeProvider } from '@ctzhian/ui';

const ThemeContext = createContext<{
  themeMode: 'light' | 'dark';
  setThemeMode: (themeMode: 'light' | 'dark') => void;
}>({
  themeMode: 'light',
  setThemeMode: () => {},
});

export const useThemeStore = () => {
  return useContext(ThemeContext);
};

export const ThemeStoreProvider = ({
  children,
  themeMode: initialThemeMode,
}: {
  themeMode: 'light' | 'dark';
  children: React.ReactNode;
}) => {
  const [themeMode, setThemeMode] = useState<'light' | 'dark'>(
    initialThemeMode,
  );
  const theme = useMemo(() => {
    return createTheme(themeMode === 'dark' ? darkTheme : lightTheme);
  }, [themeMode]);

  useEffect(() => {
    Cookies.set('theme_mode', themeMode, { expires: 365 * 10 });
  }, [themeMode]);
  return (
    <ThemeContext.Provider value={{ themeMode, setThemeMode }}>
      <ThemeProvider theme={theme}>{children}</ThemeProvider>
    </ThemeContext.Provider>
  );
};
