ERitors-Scribe-Desktop/hooks/useTheme.ts

import {useCallback, useEffect, useState} from "react";
import {SupportedTheme} from "@/context/ThemeContext";
import {getCookie, setCookie} from "@/lib/utils/cookies";

interface UseThemeReturn {
    theme: SupportedTheme;
    setTheme: (theme: SupportedTheme) => void;
}

export default function useTheme(): UseThemeReturn {
    const [theme, setThemeState] = useState<SupportedTheme>('dark');
    
    useEffect(function loadSavedTheme(): void {
        const savedTheme: string | null = getCookie('theme');
        if (savedTheme === 'light' || savedTheme === 'dark') {
            setThemeState(savedTheme);
            document.documentElement.setAttribute('data-theme', savedTheme);
        } else {
            document.documentElement.setAttribute('data-theme', 'dark');
        }
    }, []);
    
    const setTheme = useCallback(function applyTheme(newTheme: SupportedTheme): void {
        setThemeState(newTheme);
        setCookie('theme', newTheme, 365);
        document.documentElement.setAttribute('data-theme', newTheme);
    }, []);
    
    return {theme, setTheme};
}