import { KCEditorBanner } from '../../../elements/kano-editor-banner/kano-editor-banner.js';
import { EventEmitter, subscribeDOM } from '@kano/common/index.js';
import 'twemoji-min/2/twemoji.min.js';
import { BlocklyEditorBannerWidget } from '../../widget/blockly-banner.js';
export class BannerWidget extends BlocklyEditorBannerWidget {
    constructor() {
        super(...arguments);
        this.buttons = [];
    }
    getDomNode() {
        const domNode = super.getDomNode();
        if (!this.bannerEl) {
            this.bannerEl = new KCEditorBanner();
            this.bannerEl.style.margin = '7px';
            this.bannerEl.style.alignSelf = 'flex-end';
            this.bannerEl.style.pointerEvents = 'all';
            domNode.appendChild(this.bannerEl);
        }
        return domNode;
    }
    getBannerEl() {
        if (!this.bannerEl) {
            this.getDomNode();
        }
        return this.bannerEl;
    }
    setTitle(title) {
        const bannerEl = this.getBannerEl();
        bannerEl.title = title;
    }
    setText(text) {
        const bannerEl = this.getBannerEl();
        bannerEl.text = window.twemoji.parse(text);
    }
    setProgress(progress) {
        const bannerEl = this.getBannerEl();
        bannerEl.progress = progress;
    }
    setIconNode(node) {
        const bannerEl = this.getBannerEl();
        const prevNode = bannerEl.querySelector('[slot="avatar"]');
        if (prevNode) {
            prevNode.remove();
        }
        if (!node) {
            return;
        }
        node.slot = 'avatar';
        bannerEl.appendChild(node);
    }
    addButton(text, primary = false) {
        const bannerEl = this.getBannerEl();
        const el = document.createElement('button');
        el.textContent = text;
        el.slot = 'actions';
        el.classList.add('btn');
        if (!primary) {
            el.classList.add('secondary');
        }
        bannerEl.appendChild(el);
        const emitter = new EventEmitter();
        const sub = subscribeDOM(el, 'click', () => emitter.fire());
        const button = {
            dispose: () => {
                el.remove();
                emitter.dispose();
                sub.dispose();
            },
            onDidClick: emitter.event,
        };
        return button;
    }
    hide() {
        const domNode = this.getDomNode();
        domNode.style.display = 'none';
    }
    show() {
        const bannerEl = this.getBannerEl();
        const domNode = this.getDomNode();
        domNode.style.display = 'flex';
        bannerEl.classList.remove('animate');
        // This makes sure the class is added next frame and the CSS engine takes it in account
        requestAnimationFrame(() => {
            bannerEl.classList.add('animate');
        });
    }
    dispose() {
        this.buttons.forEach(b => b.dispose());
        this.buttons.length = 0;
    }
}
//# sourceMappingURL=banner.js.map