import { normalTheme, Theme } from "./themes";
import {
  createContext,
  ReactNode,
  useContext,
  useEffect,
  useState,
} from "react";

interface ThemeContextProps {
  children: ReactNode;
}

interface ThemeContextValue {
  theme: Theme;
  setTheme: (theme: Theme) => void;
}

const themeContext = createContext<ThemeContextValue>({
  theme: normalTheme,
  setTheme: () => {},
});

const ThemeProvider = ({ children }: ThemeContextProps) => {
  const [theme, setTheme] = useState(normalTheme);
  useEffect(() => {
    if (theme.backgroundColor) {
      document.body.style.backgroundColor = theme.backgroundColor;
      document.body.style.backgroundImage = "unset";
    } else if (theme.backgroundImage) {
      document.body.style.backgroundColor = "unset";
      document.body.style.backgroundImage = theme.backgroundImage;
    }
    document.body.style.color = theme.textColor;
    document.body.style.borderColor = theme.textColor;
  }, [theme]);

  return (
    <themeContext.Provider value={{ theme, setTheme }}>
      {children}
    </themeContext.Provider>
  );
};

function useTheme() {
  return useContext(themeContext);
}

export { ThemeProvider, useTheme };