var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, privateMap, value) {
    if (!privateMap.has(receiver)) {
        throw new TypeError("attempted to set private field on non-instance");
    }
    privateMap.set(receiver, value);
    return value;
};
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 _handler, _hasAdvanced;
import * as FAS from '@fortawesome/free-solid-svg-icons';
import { library } from '@fortawesome/fontawesome-svg-core';
import { h } from "@stencil/core";
import { Module } from '../../models/module';
import { InputHandler } from '../../utils/input-handler';
import { getTranslator } from '../../utils/translator';
library.add(FAS.faAngleDoubleDown, FAS.faAngleDoubleUp);
export class ModuleEditor {
    constructor() {
        this.categories = [];
        this.t = getTranslator();
        this.value = Module.empty();
        this._advanced = false;
        _handler.set(this, new InputHandler(this.el));
        _hasAdvanced.set(this, false);
        this.handleAdvancedOptions = () => {
            this._advanced = !this._advanced;
        };
        this.handleSlotChange = () => {
            __classPrivateFieldSet(this, _hasAdvanced, !!this.el.querySelector("[slot='option-advanced']"));
        };
    }
    async create(path, el) {
        return __classPrivateFieldGet(this, _handler).create(path, el);
    }
    async get(path, options) {
        return __classPrivateFieldGet(this, _handler).get(path, options);
    }
    async set(path, value, options) {
        return __classPrivateFieldGet(this, _handler).set(path, value, options);
    }
    componentWillLoad() {
        this.handleSlotChange();
    }
    componentDidLoad() {
        const query = "slot[name='option-advanced']";
        const slot = this.el.shadowRoot.querySelector(query);
        slot === null || slot === void 0 ? void 0 : slot.addEventListener('slotchange', this.handleSlotChange);
    }
    renderAdvancedOptions() {
        const item = this.t('me-module-advanced-options');
        const icon = this._advanced
            ? 'fas:angle-double-up'
            : 'fas:angle-double-down';
        return [
            __classPrivateFieldGet(this, _hasAdvanced) && (h("div", { class: "button-bar" },
                h("bce-button", { design: "text", icon: icon, iconPosition: "right", onClick: this.handleAdvancedOptions }, this._advanced
                    ? this.t('hide-item', { item })
                    : this.t('show-item', { item })))),
            h("div", { class: "advanced", style: { display: this._advanced ? 'block' : 'none' } },
                h("hr", null),
                h("slot", { name: "option-advanced" }))
        ];
    }
    renderGraph() {
        const title = this.t('me-module-graph-title');
        const subtitle = this.t('me-module-graph-subtitle');
        return [
            title && h("h5", null, title),
            subtitle && h("p", null, subtitle),
            h("bce-flow-graph", { value: this.value.flow, existing: this.existing })
        ];
    }
    render() {
        const title = this.t('me-module-title');
        const subtitle = this.t('me-module-subtitle');
        return [
            title && h("h5", null, title),
            subtitle && h("p", null, subtitle),
            h("bce-card", { onInput: __classPrivateFieldGet(this, _handler).input },
                h("bce-input", Object.assign({}, __classPrivateFieldGet(this, _handler).prop('name'), { label: this.t('name'), type: "text" })),
                h("bce-input", Object.assign({}, __classPrivateFieldGet(this, _handler).prop('description'), { label: this.t('description'), type: "textarea" })),
                this.categories.length && (h("bce-select", Object.assign({}, __classPrivateFieldGet(this, _handler).prop('category'), { label: this.t('category'), type: "dropdown" }), this.categories.map(c => (h("bce-option", { key: c.value, value: c.value }, c.label))))),
                Array.isArray(this.value.image) && (h("bce-upload", Object.assign({}, __classPrivateFieldGet(this, _handler).prop('image'), { label: this.t('image'), accept: "image/*" }))),
                h("slot", null),
                this.renderAdvancedOptions()),
            this.value.flow.start.id && this.renderGraph()
        ];
    }
    static get is() { return "bce-module-editor"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "$": ["bce-module-editor.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["bce-module-editor.css"]
    }; }
    static get properties() { return {
        "categories": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "{ value: string; label: string }[]",
                "resolved": "{ value: string; label: string; }[]",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "defaultValue": "[]"
        },
        "existing": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "string[]",
                "resolved": "string[] | undefined",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            }
        },
        "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": false,
            "complexType": {
                "original": "Module",
                "resolved": "Module",
                "references": {
                    "Module": {
                        "location": "import",
                        "path": "../../models/module"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "defaultValue": "Module.empty()"
        }
    }; }
    static get states() { return {
        "_advanced": {}
    }; }
    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": []
            }
        },
        "get": {
            "complexType": {
                "signature": "<T>(path: string, options?: InputHandler.GetOpts | undefined) => Promise<T>",
                "parameters": [{
                        "tags": [],
                        "text": ""
                    }, {
                        "tags": [],
                        "text": ""
                    }],
                "references": {
                    "Promise": {
                        "location": "global"
                    },
                    "T": {
                        "location": "global"
                    },
                    "InputHandler": {
                        "location": "import",
                        "path": "../../utils/input-handler"
                    }
                },
                "return": "Promise<T>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        },
        "set": {
            "complexType": {
                "signature": "<T>(path: string, value: T, options?: InputHandler.SetOpts | undefined) => Promise<T>",
                "parameters": [{
                        "tags": [],
                        "text": ""
                    }, {
                        "tags": [],
                        "text": ""
                    }, {
                        "tags": [],
                        "text": ""
                    }],
                "references": {
                    "Promise": {
                        "location": "global"
                    },
                    "T": {
                        "location": "global"
                    },
                    "InputHandler": {
                        "location": "import",
                        "path": "../../utils/input-handler"
                    }
                },
                "return": "Promise<T>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        }
    }; }
    static get elementRef() { return "el"; }
}
_handler = new WeakMap(), _hasAdvanced = new WeakMap();
