import { useLexicalComposerContext } from "./LexicalComposerContext";
import { $getNodeByKey, COMMAND_PRIORITY_LOW, } from "lexical";
import { createSignal, createEffect, startTransition, Show, } from "solid-js";
import { LexicalMenu, MenuOption, useMenuAnchorRef, } from "./shared/LexicalMenu";
export function LexicalNodeMenuPlugin(props) {
    const [editor] = useLexicalComposerContext();
    const [resolution, setResolution] = createSignal(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) => {
        if (props.onOpen != null && resolution() === null) {
            props.onOpen(res);
        }
        setResolution(res);
    };
    const positionOrCloseMenu = () => {
        if (props.nodeKey) {
            editor.update(() => {
                const node = $getNodeByKey(props.nodeKey);
                const domElement = editor.getElementByKey(props.nodeKey);
                if (node != null && domElement != null) {
                    if (resolution == null) {
                        startTransition(() => openNodeMenu({
                            getRect: () => domElement.getBoundingClientRect(),
                        }));
                    }
                }
            });
        }
        else if (props.nodeKey == null && resolution() != null) {
            closeNodeMenu();
        }
    };
    createEffect(positionOrCloseMenu);
    createEffect(() => {
        if (props.nodeKey != null) {
            return editor.registerUpdateListener(({ dirtyElements }) => {
                if (dirtyElements.get(props.nodeKey)) {
                    positionOrCloseMenu();
                }
            });
        }
    });
    return (<Show when={anchorElementRef.current && resolution() !== null && editor !== null}>
      <LexicalMenu close={closeNodeMenu} resolution={resolution()} editor={editor} anchorElementRef={anchorElementRef} options={props.options} menuRenderFn={props.menuRenderFn} onSelectOption={props.onSelectOption} commandPriority={props.commandPriority ?? COMMAND_PRIORITY_LOW}/>
    </Show>);
}
export { MenuOption };