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';
library.add(FAS.faAngleDoubleDown, FAS.faAngleDoubleUp);
export class ModuleEditor {
    constructor() {
        this.categories = [];
        this.label = {
            title: 'Module creation',
            subtitle: 'Use the options below to create the module.',
            labelName: 'Name',
            labelDescription: 'Description',
            labelCategory: 'Category',
            labelImage: 'Image',
            advancedShow: 'Show advanced options',
            advancedHide: 'Hide advanced options',
            graphTitle: 'Screen overview',
            graphSubtitle: 'Click on a screen for fast navigation.'
        };
        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 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.label.advancedHide : this.label.advancedShow))),
            h("div", { class: "advanced", style: { display: this._advanced ? 'block' : 'none' } },
                h("hr", null),
                h("slot", { name: "option-advanced" }))
        ];
    }
    renderGraph() {
        return [
            this.label.graphTitle && h("h5", null, this.label.graphTitle),
            this.label.graphSubtitle && h("p", null, this.label.graphSubtitle),
            h("bce-flow-graph", { value: this.value.flow, existing: this.existing })
        ];
    }
    render() {
        return [
            this.label.title && h("h5", null, this.label.title),
            this.label.subtitle && h("p", null, this.label.subtitle),
            h("bce-card", { onInput: __classPrivateFieldGet(this, _handler).input },
                h("bce-input", Object.assign({}, __classPrivateFieldGet(this, _handler).prop('name'), { type: "text" })),
                h("bce-input", Object.assign({}, __classPrivateFieldGet(this, _handler).prop('description'), { type: "textarea" })),
                this.categories.length && (h("bce-select", Object.assign({}, __classPrivateFieldGet(this, _handler).prop('category'), { type: "dropdown" }), this.categories.map(c => (h("bce-option", { key: c.value, value: c.value }, c.label))))),
                h("bce-upload", Object.assign({}, __classPrivateFieldGet(this, _handler).prop('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": ""
            }
        },
        "label": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "ModuleLabels",
                "resolved": "ModuleLabels",
                "references": {
                    "ModuleLabels": {
                        "location": "import",
                        "path": "../../models/labels"
                    }
                }
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "defaultValue": "{\n    title: 'Module creation',\n    subtitle: 'Use the options below to create the module.',\n    labelName: 'Name',\n    labelDescription: 'Description',\n    labelCategory: 'Category',\n    labelImage: 'Image',\n    advancedShow: 'Show advanced options',\n    advancedHide: 'Hide advanced options',\n    graphTitle: 'Screen overview',\n    graphSubtitle: 'Click on a screen for fast navigation.'\n  }"
        },
        "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();
