import { jsx } from 'react/jsx-runtime';
import { useState, useRef, useCallback } from 'react';
import { SubMenuContext } from './ContextMenuContext.js';

/**
 * ContextMenuSub - Wrapper for nested submenu with hover logic
 */
const ContextMenuSub = ({ children, className, }) => {
    const [isOpen, setIsOpen] = useState(false);
    const triggerRef = useRef(null);
    const hoverTimeoutRef = useRef(null);
    const handleOpenChange = useCallback((value) => {
        setIsOpen(value);
    }, []);
    // Handle mouse enter - clear any close timeout
    const handleMouseEnter = useCallback(() => {
        if (hoverTimeoutRef.current) {
            clearTimeout(hoverTimeoutRef.current);
            hoverTimeoutRef.current = null;
        }
    }, []);
    // Handle mouse leave - close submenu after delay
    const handleMouseLeave = useCallback(() => {
        if (hoverTimeoutRef.current) {
            clearTimeout(hoverTimeoutRef.current);
        }
        hoverTimeoutRef.current = setTimeout(() => {
            setIsOpen(false);
        }, 150);
    }, []);
    const contextValue = {
        isOpen,
        onOpenChange: handleOpenChange,
        triggerRef,
    };
    return (jsx(SubMenuContext.Provider, { value: contextValue, children: jsx("div", { className: className, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: children }) }));
};
ContextMenuSub.displayName = "ContextMenuSub";

export { ContextMenuSub };
