import { jsx } from 'react/jsx-runtime';
import { useState, useRef, useCallback, useEffect } from 'react';
import { cn } from '../../../utils/cn.js';
import { ContextMenuContext } from './ContextMenuContext.js';
import { ContextMenuTrigger } from './ContextMenuTrigger.js';
import { ContextMenuBody } from './ContextMenuBody.js';
import { ContextMenuItem } from './ContextMenuItem.js';
import { ContextMenuSub } from './ContextMenuSub.js';
import { ContextMenuSubTrigger } from './ContextMenuSubTrigger.js';
import { ContextMenuSubBody } from './ContextMenuSubBody.js';
import { ContextMenuSeparator } from './ContextMenuSeparator.js';
import { ContextMenuLabel } from './ContextMenuLabel.js';
import { contextMenuTheme } from './ContextMenu.theme.js';

/**
 * ContextMenu component for right-click interactions
 *
 * @component
 * @example
 * ```tsx
 * <ContextMenu>
 *   <ContextMenu.Trigger>
 *     <div>Right click here</div>
 *   </ContextMenu.Trigger>
 *   <ContextMenu.Body>
 *     <ContextMenu.Item shortcut="⌘R">Reload</ContextMenu.Item>
 *     <ContextMenu.Separator />
 *     <ContextMenu.Item checked={true}>Show Bookmarks</ContextMenu.Item>
 *   </ContextMenu.Body>
 * </ContextMenu>
 * ```
 */
const ContextMenuRoot = ({ children, className, onOpenChange, theme: themeOverrides, ...props }) => {
    const [isOpen, setIsOpen] = useState(false);
    const [cursorPosition, setCursorPosition] = useState(null);
    const contentRef = useRef(null);
    const triggerRef = useRef(null);
    // Handle open state changes
    const handleOpenChange = useCallback((value) => {
        setIsOpen(value);
        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(value);
        // Get cursor position from trigger element data attributes when opening
        if (value && triggerRef.current) {
            const x = triggerRef.current.dataset.cursorX;
            const y = triggerRef.current.dataset.cursorY;
            if (x && y) {
                setCursorPosition({ x: Number(x), y: Number(y) });
            }
        }
    }, [onOpenChange]);
    // Merge theme with overrides
    const theme = {
        ...contextMenuTheme,
        ...(themeOverrides || {}),
    };
    // Context value
    const contextValue = {
        isOpen,
        onOpenChange: handleOpenChange,
        cursorPosition,
        contentRef,
        triggerRef,
        theme,
    };
    // Prevent browser context menu on the entire component
    useEffect(() => {
        const preventContextMenu = (e) => {
            var _a;
            if ((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)) {
                e.preventDefault();
            }
        };
        document.addEventListener("contextmenu", preventContextMenu);
        return () => document.removeEventListener("contextmenu", preventContextMenu);
    }, []);
    return (jsx(ContextMenuContext.Provider, { value: contextValue, children: jsx("div", { className: cn("context-menu", className), "data-state": isOpen ? "open" : "closed", ...props, children: children }) }));
};
ContextMenuRoot.displayName = "ContextMenu";
// Export as a unified component with sub-components
const ContextMenu = Object.assign(ContextMenuRoot, {
    Trigger: ContextMenuTrigger,
    Body: ContextMenuBody,
    Item: ContextMenuItem,
    Sub: ContextMenuSub,
    SubTrigger: ContextMenuSubTrigger,
    SubBody: ContextMenuSubBody,
    Separator: ContextMenuSeparator,
    Label: ContextMenuLabel,
});

export { ContextMenu };
