"use client";
import { $applyNodeReplacement, ElementNode } from "lexical";
import { OPEN_ADMONITION_MODAL_COMMAND } from "./admonition-commands.js";
import "./admonition-node.css";
const ADMONITION_TYPES = new Set([
    'note',
    'tip',
    'warning',
    'danger'
]);
function isAdmonitionType(value) {
    return 'string' == typeof value && ADMONITION_TYPES.has(value);
}
const ICON_SVG = {
    note: '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"></path></svg>',
    tip: '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4C12.76,4 13.5,4.11 14.2,4.31L15.77,2.74C14.61,2.26 13.34,2 12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12M7.91,10.08L6.5,11.5L11,16L21,6L19.59,4.58L11,13.17L7.91,10.08Z"></path></svg>',
    warning: '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"></path></svg>',
    danger: '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg>'
};
function convertAdmonitionElement(domNode) {
    if (domNode instanceof HTMLDivElement && null != domNode.dataset.type) {
        const type = domNode.dataset.type;
        if (!isAdmonitionType(type)) return null;
        const title = domNode.dataset.title ?? '';
        return {
            node: $createAdmonitionNode({
                admonitionType: type,
                title
            })
        };
    }
    return null;
}
class AdmonitionNode extends ElementNode {
    static getType() {
        return 'admonition';
    }
    static clone(node) {
        return new AdmonitionNode(node.__admonitionType, node.__title, node.__key);
    }
    static importJSON(serializedNode) {
        return $createAdmonitionNode({
            admonitionType: serializedNode.admonitionType,
            title: serializedNode.title
        }).updateFromJSON(serializedNode);
    }
    static importDOM() {
        return {
            div: (node)=>{
                if (null == node.dataset.type || !isAdmonitionType(node.dataset.type)) return null;
                return {
                    conversion: convertAdmonitionElement,
                    priority: 1
                };
            }
        };
    }
    updateFromJSON(serializedNode) {
        return super.updateFromJSON(serializedNode).setAdmonitionType(serializedNode.admonitionType).setTitle(serializedNode.title);
    }
    exportJSON() {
        return {
            ...super.exportJSON(),
            admonitionType: this.__admonitionType,
            title: this.__title
        };
    }
    exportDOM() {
        const element = document.createElement('div');
        element.setAttribute('data-type', this.__admonitionType);
        element.setAttribute('data-title', this.__title);
        element.className = `admonition admonition-${this.__admonitionType}`;
        return {
            element
        };
    }
    isShadowRoot() {
        return true;
    }
    isInline() {
        return false;
    }
    canBeEmpty() {
        return true;
    }
    canIndent() {
        return false;
    }
    createDOM(config, editor) {
        const key = this.getKey();
        const dom = document.createElement('div');
        dom.setAttribute('data-type', this.__admonitionType);
        dom.setAttribute('data-title', this.__title);
        dom.className = `${config.theme.admonition ?? ''} admonition-${this.__admonitionType}`.trim();
        const header = document.createElement('div');
        header.className = 'AdmonitionNode__header';
        header.contentEditable = 'false';
        header.setAttribute('data-lexical-admonition-chrome', 'true');
        const icon = document.createElement('span');
        icon.className = 'AdmonitionNode__icon';
        icon.innerHTML = ICON_SVG[this.__admonitionType];
        const titleEl = document.createElement('span');
        titleEl.className = 'AdmonitionNode__title';
        titleEl.textContent = this.__title;
        const editButton = document.createElement('button');
        editButton.type = 'button';
        editButton.className = 'AdmonitionNode__edit-button';
        editButton.textContent = 'Edit';
        editButton.addEventListener('click', (event)=>{
            event.preventDefault();
            event.stopPropagation();
            editor.dispatchCommand(OPEN_ADMONITION_MODAL_COMMAND, {
                nodeKey: key
            });
        });
        header.appendChild(icon);
        header.appendChild(titleEl);
        header.appendChild(editButton);
        const content = document.createElement('div');
        content.className = 'AdmonitionNode__content';
        dom.appendChild(header);
        dom.appendChild(content);
        return dom;
    }
    getDOMSlot(element) {
        const content = element.querySelector(':scope > .AdmonitionNode__content');
        if (!(content instanceof HTMLElement)) throw new Error('AdmonitionNode: expected a .AdmonitionNode__content slot element');
        return super.getDOMSlot(element).withElement(content);
    }
    updateDOM(prevNode, dom) {
        const type = this.__admonitionType;
        if (type !== prevNode.__admonitionType) {
            dom.className = `${dom.className.replace(/admonition-\w+/, '').trim()} admonition-${type}`.trim();
            dom.setAttribute('data-type', type);
            const icon = dom.querySelector(':scope > .AdmonitionNode__header > .AdmonitionNode__icon');
            if (null != icon) icon.innerHTML = ICON_SVG[type];
        }
        if (this.__title !== prevNode.__title) {
            dom.setAttribute('data-title', this.__title);
            const titleEl = dom.querySelector(':scope > .AdmonitionNode__header > .AdmonitionNode__title');
            if (null != titleEl) titleEl.textContent = this.__title;
        }
        return false;
    }
    getTitle() {
        return this.getLatest().__title;
    }
    setTitle(title) {
        const writable = this.getWritable();
        writable.__title = title;
        return writable;
    }
    getAdmonitionType() {
        return this.getLatest().__admonitionType;
    }
    setAdmonitionType(admonitionType) {
        const writable = this.getWritable();
        writable.__admonitionType = admonitionType;
        return writable;
    }
    update(payload) {
        const writable = this.getWritable();
        if (null != payload.admonitionType) writable.__admonitionType = payload.admonitionType;
        if (null != payload.title) writable.__title = payload.title;
    }
    constructor(admonitionType, title, key){
        super(key);
        this.__admonitionType = admonitionType;
        this.__title = title;
    }
}
function $createAdmonitionNode({ admonitionType, title, key }) {
    return $applyNodeReplacement(new AdmonitionNode(admonitionType, title, key));
}
function $isAdmonitionNode(node) {
    return node instanceof AdmonitionNode;
}
export { $createAdmonitionNode, $isAdmonitionNode, AdmonitionNode };
