import { $applyNodeReplacement, CLICK_COMMAND, COMMAND_PRIORITY_LOW, } from "lexical";
import { createEffect, onCleanup } from "solid-js";
import { createCommand, DecoratorNode } from "lexical";
import { useLexicalComposerContext } from "./LexicalComposerContext";
import { useLexicalNodeSelection } from "./useLexicalNodeSelection";
import { addClassNamesToElement, mergeRegister, removeClassNamesFromElement, } from "@lexical/utils";
export const INSERT_HORIZONTAL_RULE_COMMAND = createCommand("INSERT_HORIZONTAL_RULE_COMMAND");
function HorizontalRuleComponent(props) {
    const [editor] = useLexicalComposerContext();
    const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(props.nodeKey);
    createEffect(() => {
        onCleanup(mergeRegister(editor.registerCommand(CLICK_COMMAND, (event) => {
            const hrElem = editor.getElementByKey(props.nodeKey);
            if (event.target === hrElem) {
                if (!event.shiftKey) {
                    clearSelection();
                }
                setSelected(!isSelected);
                return true;
            }
            return false;
        }, COMMAND_PRIORITY_LOW)));
    });
    createEffect(() => {
        const hrElem = editor.getElementByKey(props.nodeKey);
        const isSelectedClassName = editor._config.theme.hrSelected ?? "selected";
        if (hrElem !== null) {
            if (isSelected()) {
                addClassNamesToElement(hrElem, isSelectedClassName);
            }
            else {
                removeClassNamesFromElement(hrElem, isSelectedClassName);
            }
        }
    });
    return null;
}
export class HorizontalRuleNode extends DecoratorNode {
    static getType() {
        return "horizontalrule";
    }
    static clone(node) {
        return new HorizontalRuleNode(node.__key);
    }
    static importJSON(serializedNode) {
        return $createHorizontalRuleNode().updateFromJSON(serializedNode);
    }
    static importDOM() {
        return {
            hr: () => ({
                conversion: $convertHorizontalRuleElement,
                priority: 0,
            }),
        };
    }
    exportDOM() {
        return { element: document.createElement("hr") };
    }
    createDOM(config) {
        const element = document.createElement("hr");
        addClassNamesToElement(element, config.theme.hr);
        return element;
    }
    getTextContent() {
        return "\n";
    }
    isInline() {
        return false;
    }
    updateDOM() {
        return false;
    }
    decorate() {
        return <HorizontalRuleComponent nodeKey={this.__key}/>;
    }
}
function $convertHorizontalRuleElement() {
    return { node: $createHorizontalRuleNode() };
}
export function $createHorizontalRuleNode() {
    return $applyNodeReplacement(new HorizontalRuleNode());
}
export function $isHorizontalRuleNode(node) {
    return node instanceof HorizontalRuleNode;
}