import React, { createContext, useEffect, useState } from "react";

export const themes = {
    dark: '',
    light: 'white-context',
};

export const ThemeContext = createContext({
    theme: themes.dark,
    changeTheme: () => { },
});

export default function ThemeContextWrapper(props) {
    const [theme, setTheme] = useState(themes.dark);

    function changeTheme(theme) {
        setTheme(theme);
    }

    useEffect(() => {
        switch (theme) {
            case themes.light:
                document.body.classList.remove('white-content');
                document.body.classList.add('black-content');
                break;
            case themes.dark:
            default:
                document.body.classList.remove('black-content');
                document.body.classList.add('white-content');
                break;
        }
    }, [theme]);

    return (
        <ThemeContext.Provider value={{
            theme: theme,
            changeTheme: changeTheme,
        }}>
            {props.children}
        </ThemeContext.Provider>
    );
}