'use client';

import * as React from 'react';
import { useColorScheme } from '@mui/material/styles';

export interface ThemeContextValue {
  colorScheme: 'light' | 'dark' | 'system' | undefined;
  setColorScheme: (colorScheme: 'light' | 'dark' | 'system') => void;
  toggleColorScheme: () => void;
}

export const ThemeContext = React.createContext<ThemeContextValue | undefined>(undefined);

export interface ThemeContextProviderProps {
  children: React.ReactNode;
}

export function ThemeContextProvider({ children }: ThemeContextProviderProps): React.JSX.Element {
  const { mode, setMode } = useColorScheme();

  const toggleColorScheme = React.useCallback(() => {
    setMode(mode === 'light' ? 'dark' : 'light');
  }, [mode, setMode]);

  const contextValue = React.useMemo(
    (): ThemeContextValue => ({
      colorScheme: mode,
      setColorScheme: setMode,
      toggleColorScheme,
    }),
    [mode, setMode, toggleColorScheme]
  );

  return <ThemeContext.Provider value={contextValue}>{children}</ThemeContext.Provider>;
}

export function useThemeContext(): ThemeContextValue {
  const context = React.useContext(ThemeContext);

  if (!context) {
    throw new Error('useThemeContext must be used within a ThemeContextProvider');
  }

  return context;
}