import { useCallback, useEffect, useRef, useState } from 'react';
const MOUSE_LEAVE_PADDING = 30;
const isInsidePaddedRect = (e, rect, padding) => e.clientX >= rect.left - padding &&
    e.clientX <= rect.right + padding &&
    e.clientY >= rect.top - padding &&
    e.clientY <= rect.bottom + padding;
export function useEditableTableContextMenu(cellInteraction) {
    const [position, setPosition] = useState(null);
    const [cell, setCell] = useState(null);
    const menuRef = useRef(null);
    const cellElRef = useRef(null);
    const handleContextMenu = useCallback((e) => {
        const cellEl = e.target.closest('[data-row-key][data-column-id]');
        if (!cellEl) {
            return;
        }
        e.preventDefault();
        const rowKey = cellEl.getAttribute('data-row-key');
        const columnId = cellEl.getAttribute('data-column-id');
        if (!cellInteraction.isCellSelected(rowKey, columnId)) {
            cellInteraction.focusCell(rowKey, columnId);
        }
        cellElRef.current = cellEl;
        setPosition({ x: e.clientX, y: e.clientY });
        setCell({ rowKey, columnId });
    }, [cellInteraction]);
    const handleClose = useCallback(() => {
        setPosition(null);
        setCell(null);
        cellElRef.current = null;
    }, []);
    useEffect(() => {
        if (!position) {
            return;
        }
        const isInside = (target) => menuRef.current?.contains(target);
        const onMouseDown = (e) => {
            if (!isInside(e.target)) {
                handleClose();
            }
        };
        const onScroll = (e) => {
            if (!isInside(e.target)) {
                handleClose();
            }
        };
        const onMouseMove = (e) => {
            if (!menuRef.current) {
                return;
            }
            const menuRect = menuRef.current.getBoundingClientRect();
            // Skip until the menu has been laid out
            if (menuRect.width === 0 || menuRect.height === 0) {
                return;
            }
            // Stay open if cursor is near the menu
            if (isInsidePaddedRect(e, menuRect, MOUSE_LEAVE_PADDING)) {
                return;
            }
            // Stay open if cursor is on the cell that triggered the menu
            if (cellElRef.current) {
                const cellRect = cellElRef.current.getBoundingClientRect();
                if (isInsidePaddedRect(e, cellRect, 0)) {
                    return;
                }
            }
            handleClose();
        };
        document.addEventListener('mousedown', onMouseDown);
        document.addEventListener('scroll', onScroll, true);
        document.addEventListener('mousemove', onMouseMove);
        return () => {
            document.removeEventListener('mousedown', onMouseDown);
            document.removeEventListener('scroll', onScroll, true);
            document.removeEventListener('mousemove', onMouseMove);
        };
    }, [position, handleClose]);
    return { position, cell, menuRef, handleContextMenu, handleClose };
}
//# sourceMappingURL=useEditableTableContextMenu.js.map