import { actions, selectors } from "@/store";
import { useCallback, useMemo } from "react";
import { useDispatch, useSelector } from "react-redux";

export enum ESiteTheme {
    Dark,
    Light
}

export const useTheme = () => {
    const dispatch = useDispatch();
    const darkTheme = useSelector(selectors.selectDarkTheme);

    const setTheme = useCallback((value: ESiteTheme) => {
        if (value === ESiteTheme.Dark) {
            document.body.classList.add("dark-theme");
        } else {
            document.body.classList.remove("dark-theme");
        }
        dispatch(actions.siteConfig.updateDarkTheme(value === ESiteTheme.Dark));
    }, [dispatch]);

    return useMemo(() => ({
        darkTheme,
        setTheme
    }), [
        darkTheme,
        setTheme
    ]);
};
