"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.YfmCutTitleNodeView = void 0;
const const_1 = require("../const.js");
require("./yfm-cut-title.css");
class YfmCutTitleNodeView {
    dom;
    contentDOM;
    node;
    constructor(node) {
        this.node = node;
        this.dom = document.createElement('div');
        this.dom.classList.add(const_1.YfmCutClassName.Title);
        this.dom.addEventListener('click', this._onTitleClick);
        updateDomAttribute(this.dom, const_1.CutAttr.Line, node.attrs[const_1.CutAttr.Line]);
        this.contentDOM = this.dom.appendChild(document.createElement('div'));
        this.contentDOM.classList.add(const_1.YfmCutClassName.TitleInner);
        this.contentDOM.addEventListener('click', this._onTitleInnerClick);
    }
    update(node) {
        if (this.node.type !== node.type)
            return false;
        this.node = node;
        updateDomAttribute(this.dom, const_1.CutAttr.Line, node.attrs[const_1.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(const_1.YfmCutClassName.Cut)) {
                // TODO: toggle open classname via prosemirror decoration
                parent.classList.toggle(const_1.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();
    };
}
exports.YfmCutTitleNodeView = YfmCutTitleNodeView;
function updateDomAttribute(elem, attr, value) {
    if (value) {
        elem.setAttribute(attr, value);
    }
    else {
        elem.removeAttribute(attr);
    }
}
//# sourceMappingURL=yfm-cut-title.js.map
