var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, privateMap) {
    if (!privateMap.has(receiver)) {
        throw new TypeError("attempted to get private field on non-instance");
    }
    return privateMap.get(receiver);
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
var _handler, _icon;
import { h } from "@stencil/core";
import { BlockElement } from '../../models/element';
import { InputHandler } from '../../utils/input-handler';
import { getTranslator } from '../../utils/translator';
export class ElementEditor {
    constructor() {
        this.elementAction = [];
        this.elementQuestion = [];
        this.languages = [];
        this.name = 'Unnamed Element';
        this.t = getTranslator();
        this._tick = false;
        _handler.set(this, new InputHandler(this.el));
        _icon.set(this, BlockElement.icon(this.value.type));
        this.handleAction = async (action, event) => {
            const result = await action.handler(this.value, {
                event,
                language: this.language
            });
            if (!result)
                return;
            this.value = Object.assign({}, result);
            const e = new globalThis.Event('input', { bubbles: true, composed: true });
            this.el.dispatchEvent(e);
            this._tick = !this._tick;
        };
    }
    watchLanguage() {
        __classPrivateFieldGet(this, _handler).setLanguage(this.languages, this.language || '');
    }
    async create(path, el) {
        return __classPrivateFieldGet(this, _handler).create(path, el);
    }
    async reattachMenu() {
        var _a;
        const root1 = this.el.shadowRoot;
        const menu1 = root1.querySelector('bce-menu');
        const p1 = menu1 === null || menu1 === void 0 ? void 0 : menu1.reattach();
        const query = `bce-element-${this.value.type}-editor`;
        const root2 = root1.querySelector(query).shadowRoot;
        const root3 = (_a = root2.querySelector('bce-option-creator')) === null || _a === void 0 ? void 0 : _a.shadowRoot;
        const menu2 = Array.from((root3 === null || root3 === void 0 ? void 0 : root3.querySelectorAll('bce-menu')) || []);
        const p2 = menu2.map(m => m.reattach());
        await Promise.all([p1, ...p2]);
    }
    componentWillLoad() {
        this.watchLanguage();
    }
    renderAction(action) {
        const condition = action.condition ? action.condition(this.value) : true;
        if (!condition)
            return;
        return (h("bce-button", { icon: action.icon, onClick: (e) => this.handleAction(action, e) }, action.label));
    }
    renderQuestion(question) {
        const { value: getValue, onInput } = question, spread = __rest(question, ["value", "onInput"]);
        const value = getValue && getValue(this.value);
        const handler = (event) => onInput(this.value, event);
        return h("bce-input", Object.assign({}, spread, { value: value, onInput: handler }));
    }
    render() {
        const { id, type } = this.value;
        const Editor = `bce-element-${type}-editor`;
        const lang = this.languages.find(l => l.key === this.language) || this.languages[0];
        return (h("bce-form", { design: "card", id: id },
            h("header", null,
                h("bce-icon", { raw: __classPrivateFieldGet(this, _icon) }),
                h("label", { htmlFor: id }, this.name),
                lang && lang.flag && h("img", { src: lang.flag, alt: lang.label }),
                h("bce-menu", null,
                    this.elementAction.map(a => this.renderAction(a)),
                    h("bce-button", { icon: "fas:trash", onClick: this.onDelete.emit }, this.t('delete-item', { item: this.name })))),
            h(Editor, { handler: __classPrivateFieldGet(this, _handler), language: this.language, t: this.t, tick: this._tick, value: this.value },
                this.elementQuestion.map(q => this.renderQuestion(q)),
                h("slot", null))));
    }
    static get is() { return "bce-element-editor"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "$": ["bce-element-editor.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["bce-element-editor.css"]
    }; }
    static get properties() { return {
        "elementAction": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "ElementAction[]",
                "resolved": "ElementAction[]",
                "references": {
                    "ElementAction": {
                        "location": "import",
                        "path": "../../models/element-action"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "defaultValue": "[]"
        },
        "elementQuestion": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "ElementQuestion[]",
                "resolved": "ElementQuestion[]",
                "references": {
                    "ElementQuestion": {
                        "location": "import",
                        "path": "../../models/element-question"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "defaultValue": "[]"
        },
        "language": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string | undefined",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "language",
            "reflect": false
        },
        "languages": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "BlockLanguages",
                "resolved": "{ key: string; label: string; flag?: string | undefined; }[]",
                "references": {
                    "BlockLanguages": {
                        "location": "import",
                        "path": "../../models/block-languages"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "defaultValue": "[]"
        },
        "name": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "name",
            "reflect": false,
            "defaultValue": "'Unnamed Element'"
        },
        "t": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "I18n.Translator",
                "resolved": "Translator<\"false\" | \"true\" | \"add-item\" | \"answer\" | \"category\" | \"column\" | \"delete-item\" | \"description\" | \"example\" | \"hide-item\" | \"icon\" | \"image\" | \"link\" | \"max\" | \"me-auto-play\" | \"me-block-subtitle\" | \"me-block-title\" | \"me-element-audio\" | \"me-element-checkbox-max\" | \"me-element-checkbox\" | \"me-element-download-placeholder\" | \"me-element-download\" | \"me-element-header-placeholder\" | \"me-element-header\" | \"me-element-icon\" | \"me-element-image\" | \"me-element-input-multiline\" | \"me-element-input\" | \"me-element-link\" | \"me-element-matrix\" | \"me-element-radio\" | \"me-element-slider\" | \"me-element-sort\" | \"me-element-table\" | \"me-element-text\" | \"me-element-video\" | \"me-flow-action-add\" | \"me-flow-action-delete\" | \"me-flow-action-end\" | \"me-flow-action-open\" | \"me-flow-condition-other\" | \"me-flow-condition-screen\" | \"me-flow-option-conditional\" | \"me-flow-option-end\" | \"me-flow-option-next\" | \"me-flow-subtitle\" | \"me-flow-title\" | \"me-module-advanced-options\" | \"me-module-graph-subtitle\" | \"me-module-graph-title\" | \"me-module-subtitle\" | \"me-module-title\" | \"me-option\" | \"me-orientation-h\" | \"me-orientation-v\" | \"me-orientation\" | \"me-other\" | \"me-question\" | \"me-required\" | \"min\" | \"name\" | \"row\" | \"show-item\" | \"step-size\" | \"text-left\" | \"text-right\" | \"text\" | \"upload-item\">",
                "references": {
                    "I18n": {
                        "location": "import",
                        "path": "@bce-technology/i18n"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "defaultValue": "getTranslator()"
        },
        "value": {
            "type": "unknown",
            "mutable": true,
            "complexType": {
                "original": "BlockElement",
                "resolved": "AudioElement | CheckboxElement | DownloadElement | HeaderElement | IconElement | ImageElement | InputElement | LinkElement | MatrixElement | RadioElement | SliderElement | SortElement | TableElement | TextElement | VideoElement",
                "references": {
                    "BlockElement": {
                        "location": "import",
                        "path": "../../models/element"
                    }
                }
            },
            "required": true,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            }
        }
    }; }
    static get states() { return {
        "_tick": {}
    }; }
    static get events() { return [{
            "method": "onDelete",
            "name": "delete",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }, {
            "method": "onDuplicate",
            "name": "duplicate",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }]; }
    static get methods() { return {
        "create": {
            "complexType": {
                "signature": "(path: string, el: any) => Promise<void>",
                "parameters": [{
                        "tags": [],
                        "text": ""
                    }, {
                        "tags": [],
                        "text": ""
                    }],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        },
        "reattachMenu": {
            "complexType": {
                "signature": "() => Promise<void>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        }
    }; }
    static get elementRef() { return "el"; }
    static get watchers() { return [{
            "propName": "language",
            "methodName": "watchLanguage"
        }, {
            "propName": "languages",
            "methodName": "watchLanguage"
        }]; }
}
_handler = new WeakMap(), _icon = new WeakMap();
