import { useLexicalComposerContext } from "./LexicalComposerContext";
import { COMMAND_PRIORITY_LOW, isDOMNode, } from "lexical";
import { createEffect, createSignal, onCleanup, Show, } from "solid-js";
import { LexicalMenu, MenuOption, useMenuAnchorRef, } from "./shared/LexicalMenu";
import { calculateZoomLevel } from "@lexical/utils";
const PRE_PORTAL_DIV_SIZE = 1;
export function LexicalContextMenuPlugin(props) {
    const [editor] = useLexicalComposerContext();
    const [resolution, setResolution] = createSignal(null);
    const menuRef = { current: null };
    const anchorElementRef = useMenuAnchorRef(resolution, setResolution, props.anchorClassName, props.parent);
    const closeNodeMenu = () => {
        if (props.onClose != null && resolution() !== null) {
            props.onClose();
        }
        setResolution(null);
    };
    const openNodeMenu = (res) => {
        const onOpen = props.onOpen;
        if (onOpen != null && resolution() === null) {
            onOpen(res);
        }
        setResolution(res);
    };
    const handleContextMenu = (event) => {
        event.preventDefault();
        const onWillOpen = props.onWillOpen;
        if (onWillOpen != null) {
            onWillOpen(event);
        }
        const zoom = calculateZoomLevel(event.target);
        openNodeMenu({
            getRect: () => new DOMRect(event.clientX / zoom, event.clientY / zoom, PRE_PORTAL_DIV_SIZE, PRE_PORTAL_DIV_SIZE),
        });
    };
    const handleClick = (event) => {
        if (resolution() !== null &&
            menuRef.current != null &&
            isDOMNode(event.target) &&
            !menuRef.current.contains(event.target)) {
            closeNodeMenu();
        }
    };
    createEffect(() => {
        const editorElement = editor.getRootElement();
        if (editorElement) {
            editorElement.addEventListener("contextmenu", handleContextMenu);
            onCleanup(() => editorElement.removeEventListener("contextmenu", handleContextMenu));
        }
    });
    createEffect(() => {
        document.addEventListener("click", handleClick);
        onCleanup(() => document.removeEventListener("click", handleClick));
    });
    return (<Show when={anchorElementRef.current && resolution() !== null && editor !== null}>
      <LexicalMenu close={closeNodeMenu} resolution={resolution()} editor={editor} anchorElementRef={anchorElementRef} options={props.options} menuRenderFn={(anchorRef, itemProps) => props.menuRenderFn(anchorRef, itemProps, {
            setMenuRef: (ref) => {
                menuRef.current = ref;
            },
        })} onSelectOption={props.onSelectOption} commandPriority={props.commandPriority ?? COMMAND_PRIORITY_LOW}/>
    </Show>);
}
export { MenuOption };