import * as React from "react";
import {
  Context,
  createContext,
  ReactElement,
  ReactNode, useEffect,
  useMemo,
  useState
} from "react";
import {ThemeConfig} from "bootstrap-darkmode";

interface DarkModeApi {
  darkMode: boolean
  toggle: () => void
}

export const DarkModeContext = createContext<Partial<DarkModeApi>>({}) as Context<DarkModeApi>;
interface DarkModeProviderProps {
  children: ReactNode
}

export default function DarkModeProvider({ children }: DarkModeProviderProps) {
  const themeConfig = useMemo(() => new ThemeConfig(), []);
  const [darkMode, setDarkMode] = useState(() => themeConfig.getTheme() === 'dark')

  useEffect(() => {
    themeConfig.setTheme(darkMode ? 'dark' : 'light');
  }, [darkMode])

  return (
    <DarkModeContext.Provider
      value={{
        darkMode,
        toggle: () => setDarkMode(dm => !dm),
      }}
    >

      {children}
    </DarkModeContext.Provider>
  )
}