import React, { useLayoutEffect, useState } from 'react';
import { ThemeContextType, ThemeProviderProps, themes } from "./types";
import { ThemeContext } from './context';



export function ThemeProvider(props: ThemeProviderProps) {
    const [theme, setTheme] = useState<string | null>(localStorage.getItem('theme'));

    function changeTheme(_theme: string) {
        localStorage.setItem('theme', _theme);
        setTheme(_theme);
    }

    const isDark = () => {
        return theme === themes.dark;
    }

    useLayoutEffect(() => {
        theme === themes.dark
            ? document.documentElement.setAttribute("data-bs-theme", "dark")
            : document.documentElement.removeAttribute("data-bs-theme");
    }, [theme]);

    const themeContextValue: ThemeContextType = {
        theme,
        changeTheme,
        defaultTheme: theme || themes.dark,
        isDark,
    };

    return (
        <ThemeContext.Provider value={themeContextValue}>
            {props.children}
        </ThemeContext.Provider>
    );
}