import React, { useCallback, useContext, useMemo, useState } from "react";
import { ThemeProvider } from "styled-components";

import { getTheme, Theme } from "@/lib";
import GlobalStyles from "@/lib/theme";

interface ThemeContextProps {
  isDarkMode: boolean;
  toggleDarkMode: () => void;
  theme: Theme;
}

const ThemeContext = React.createContext({} as ThemeContextProps);

type CustomThemeProviderProps = {
  children: React.ReactNode;
  isDarkThemeDefault?: boolean;
};

const ThemeProviderContext = ({
  children,
  isDarkThemeDefault = false,
}: CustomThemeProviderProps) => {
  const [isDarkMode, setIsDarkMode] = useState(isDarkThemeDefault);

  const theme = useMemo(() => getTheme(isDarkMode), [isDarkMode]);

  const toggleDarkMode = useCallback(() => {
    setIsDarkMode(!isDarkMode);
  }, [isDarkMode]);

  return (
    <ThemeContext.Provider value={{ isDarkMode, theme, toggleDarkMode }}>
      <ThemeProvider theme={theme}>
        <>
          <GlobalStyles dark={isDarkMode} />
          {children}
        </>
      </ThemeProvider>
    </ThemeContext.Provider>
  );
};

const useThemeContext = () => useContext(ThemeContext);
export { ThemeProviderContext, useThemeContext };