import { CutAttr, YfmCutClassName } from "../const.js";
import "./yfm-cut-title.css";
export class YfmCutTitleNodeView {
    dom;
    contentDOM;
    node;
    constructor(node) {
        this.node = node;
        this.dom = document.createElement('div');
        this.dom.classList.add(YfmCutClassName.Title);
        this.dom.addEventListener('click', this._onTitleClick);
        updateDomAttribute(this.dom, CutAttr.Line, node.attrs[CutAttr.Line]);
        this.contentDOM = this.dom.appendChild(document.createElement('div'));
        this.contentDOM.classList.add(YfmCutClassName.TitleInner);
        this.contentDOM.addEventListener('click', this._onTitleInnerClick);
    }
    update(node) {
        if (this.node.type !== node.type)
            return false;
        this.node = node;
        updateDomAttribute(this.dom, CutAttr.Line, node.attrs[CutAttr.Line]);
        return true;
    }
    destroy() {
        this.dom.removeEventListener('click', this._onTitleClick);
        this.contentDOM.removeEventListener('click', this._onTitleInnerClick);
    }
    _onTitleClick = (e) => {
        const { currentTarget } = e;
        if (currentTarget instanceof HTMLElement) {
            const parent = currentTarget.parentElement;
            if (parent?.classList.contains(YfmCutClassName.Cut)) {
                // TODO: toggle open classname via prosemirror decoration
                parent.classList.toggle(YfmCutClassName.Open);
            }
        }
    };
    _onTitleInnerClick = (e) => {
        // ignore clicking on the title content
        // you can open/close yfm-cut by clicking on the arrow icon
        e.stopPropagation();
        e.preventDefault();
    };
}
function updateDomAttribute(elem, attr, value) {
    if (value) {
        elem.setAttribute(attr, value);
    }
    else {
        elem.removeAttribute(attr);
    }
}
//# sourceMappingURL=yfm-cut-title.js.map
