import { useEffect, useRef, useState } from 'react';

export interface UseMenuResult {
    menuOpen: boolean;
    mouseInteraction: boolean;
    setMouseInteraction: (mouseInteraction: boolean) => void;
    handleMouseMove: () => void;
}

export default function useMenu(initialOpen: boolean): UseMenuResult {
    // Mouse move menu
    const mouseMoveRef = useRef<NodeJS.Timeout | null>(null);
    const [menuOpen, setMenuOpen] = useState(initialOpen);

    // No mouse interaction blocks pointerevents for all views
    const [mouseInteraction, setMouseInteraction] = useState(false); 
    const mouseInteractionRef = useRef<boolean>(mouseInteraction);
    mouseInteractionRef.current = mouseInteraction;

    const handleMouseMove = () => {
        const root = document.getElementById('root');
        root?.style.removeProperty('cursor');
        
        setMenuOpen(true);

        if (mouseMoveRef.current) {
            clearTimeout(mouseMoveRef.current);
            mouseMoveRef.current = null;
        }
        
        mouseMoveRef.current = setTimeout(() => {
            setMenuOpen(false);

            if (process.env.NODE_ENV !== 'development' && !mouseInteractionRef.current) {
                root?.style.setProperty('cursor', 'none', 'important');
            }
        }, 5000);
    };

    useEffect(() => () => {
        mouseMoveRef.current && clearTimeout(mouseMoveRef.current);
    }, []);

    return {
        menuOpen,
        mouseInteraction,
        setMouseInteraction,
        handleMouseMove,
    };
}