import { Blockly, utils, goog } from '@kano/kwc-blockly/blockly.js';
import { FieldIcon } from './icon.js';
import '@kano/styles/color.js';
import '@kano/styles/typography.js';
import '../../../elements/kc-indexed-picker.js';
import { subscribeDOM } from '@kano/common/index.js';
export class StampsField extends FieldIcon {
    constructor(value, items, optValidator, legacyIds) {
        super(value, optValidator);
        this.domNode = null;
        this.label = '';
        this.items = items;
        if (legacyIds) {
            this.setLegacyIdMap(legacyIds);
        }
    }
    render_() {
        this.legacyValueCheck(this.getValue());
        this.label = this.getLabelFromValue(this.getValue());
        super.render_();
    }
    showEditor_() {
        if (!this.domNode) {
            this.domNode = document.createElement('kc-indexed-picker');
            this.domNode.style.border = '2px solid var(--kc-border-color)';
            this.domNode.style.borderRadius = '6px';
            this.domNode.style.overflow = 'hidden';
            this.domNode.style.boxShadow = '0px 4px 4px 0px rgba(0, 0, 0, 0.15)';
            this.domNode.items = this.items.map((set) => {
                return {
                    id: set.id,
                    label: set.label,
                    items: set.resources.map((sticker) => ({ id: sticker.id, label: sticker.label, image: sticker.src })),
                };
            });
            subscribeDOM(this.domNode, 'value-changed', (e) => {
                this.setLabel(e.detail.label);
                this.setValue(e.detail.id);
            });
        }
        Blockly.WidgetDiv.show(this, this.sourceBlock_.RTL, StampsField.widgetDispose_);
        const div = Blockly.WidgetDiv.DIV;
        div.appendChild(this.domNode);
        this.domNode.value = this.getValue();
        this.position();
        if ('animate' in HTMLElement.prototype) {
            div.animate({
                opacity: [0, 1],
            }, {
                duration: 100,
                easing: 'ease-out',
            });
        }
        setTimeout(() => {
            if (!this.domNode) {
                return;
            }
            this.domNode.revealSelectedElement();
        });
    }
    position() {
        const viewportBBox = utils.getViewportBBox();
        const anchorBBox = this.getScaledBBox_();
        const elementSize = goog.style.getSize(this.domNode);
        Blockly.WidgetDiv.positionWithAnchor(viewportBBox, anchorBBox, elementSize, this.sourceBlock_.RTL);
    }
    getIcon(value) {
        const item = this.getItemForValue(value);
        if (item) {
            return item.src;
        }
        return '';
    }
    getDisplayText_() {
        return this.getLabel();
    }
    getOptions() {
        return this.items;
    }
    getItemForValue(value) {
        for (let i = 0; i < this.items.length; i += 1) {
            const found = this.items[i].resources.find((s) => s.id === value);
            if (found) {
                return found;
            }
        }
        return null;
    }
    getLabelFromValue(value) {
        const item = this.getItemForValue(value);
        if (item) {
            return item.label;
        }
        return '';
    }
    setLabel(label) {
        this.label = label;
    }
    getLabel() {
        return this.label;
    }
    static widgetDispose_() { }
}
//# sourceMappingURL=stamps-field.js.map