import { faAngleDoubleDown, faAngleDoubleUp } from '@fortawesome/free-solid-svg-icons';
import { library } from '@fortawesome/fontawesome-svg-core';
import { h } from "@stencil/core";
import { Module } from '../../models/module';
import { linker } from '../../utils/input-linker';
import { storedFiles } from '../../utils/stored-files';
library.add(faAngleDoubleDown, faAngleDoubleUp);
export class BceModuleEditor {
    constructor() {
        this.value = Module.empty();
        this.categories = [];
        this.allowAdvanced = false;
        this.labelTitle = 'Module creation';
        this.labelSubtitle = 'Use the options below to create the module.';
        this.labelName = 'Name';
        this.labelDescription = 'Description';
        this.labelCategory = 'Category';
        this.labelImage = 'Image';
        this.labelAdvancedShow = 'Show advanced options';
        this.labelAdvancedHide = 'Hide advanced options';
        this.labelGraphTitle = 'Screen overview';
        this.labelGraphSubtitle = 'Click on a screen for fast navigation.';
        this.advanced = false;
        this._link = linker(this, this.handleInput);
        this._name = this._link('name');
        this._description = this._link('description');
        this._category = this._link('category');
        this._image = this._link('image');
        this.handleAdvancedOptions = () => {
            this.advanced = !this.advanced;
        };
    }
    handleInput(name, event) {
        const input = event.target;
        if (!input)
            return;
        event.cancelBubble = true;
        this.value = this.updateValue(name, input.value);
        this.el.dispatchEvent(new Event('input'));
    }
    updateValue(key, value) {
        return Object.assign({}, this.value, { [key]: value });
    }
    async getStoredFiles() {
        return storedFiles(this.value);
    }
    async metadata(key, value) {
        if (!value) {
            const copy = Object.assign({}, this.value, { metadata: Object.assign({}, this.value.metadata) });
            delete copy.metadata[key];
            this.value = copy;
            this.el.dispatchEvent(new Event('input'));
            return;
        }
        this.value = Object.assign({}, this.value, { metadata: Object.assign({}, this.value.metadata, { [key]: value }) });
        this.el.dispatchEvent(new Event('input'));
    }
    renderCategories() {
        if (!this.categories.length)
            return null;
        return (h("bce-input", Object.assign({ type: "dropdown" }, this._category), this.categories.map(category => (h("bce-option", { value: category.value }, category.label)))));
    }
    renderAdvancedOptions() {
        return [
            h("div", { style: { display: this.advanced ? 'block' : 'none' }, "data-advanced": true },
                h("slot", { name: "option-advanced" })),
            h("bce-button", { type: "text", icon: this.advanced ? 'fas:angle-double-up' : 'fas:angle-double-down', onClick: this.handleAdvancedOptions }, this.advanced ? this.labelAdvancedHide : this.labelAdvancedShow)
        ];
    }
    renderGraph() {
        return [
            this.labelGraphTitle && h("h5", null, this.labelGraphTitle),
            this.labelGraphSubtitle && h("p", null, this.labelGraphSubtitle),
            h("bce-flow-graph", { value: this.value.flow, existing: this.existing })
        ];
    }
    render() {
        const { name, description, image } = this.value;
        return [
            this.labelTitle && h("h5", null, this.labelTitle),
            this.labelSubtitle && h("p", null, this.labelSubtitle),
            h("div", { "data-module": true },
                h("bce-input", Object.assign({ type: "text" }, this._name, { value: name })),
                h("bce-input", Object.assign({ type: "textarea" }, this._description, { value: description })),
                this.renderCategories(),
                h("bce-input", Object.assign({ type: "container" }, this._image),
                    h("bce-upload-input", Object.assign({}, this._image, { value: image }))),
                h("slot", { name: "option" }),
                this.allowAdvanced && this.renderAdvancedOptions()),
            this.value.flow.start.id && this.renderGraph()
        ];
    }
    static get is() { return "bce-module-editor"; }
    static get originalStyleUrls() { return {
        "$": ["bce-module-editor.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["bce-module-editor.css"]
    }; }
    static get properties() { return {
        "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()"
        },
        "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": ""
            }
        },
        "allowAdvanced": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "allow-advanced",
            "reflect": true,
            "defaultValue": "false"
        },
        "labelTitle": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "label-title",
            "reflect": false,
            "defaultValue": "'Module creation'"
        },
        "labelSubtitle": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "label-subtitle",
            "reflect": false,
            "defaultValue": "'Use the options below to create the module.'"
        },
        "labelName": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "label-name",
            "reflect": false,
            "defaultValue": "'Name'"
        },
        "labelDescription": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "label-description",
            "reflect": false,
            "defaultValue": "'Description'"
        },
        "labelCategory": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "label-category",
            "reflect": false,
            "defaultValue": "'Category'"
        },
        "labelImage": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "label-image",
            "reflect": false,
            "defaultValue": "'Image'"
        },
        "labelAdvancedShow": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "label-advanced-show",
            "reflect": false,
            "defaultValue": "'Show advanced options'"
        },
        "labelAdvancedHide": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "label-advanced-hide",
            "reflect": false,
            "defaultValue": "'Hide advanced options'"
        },
        "labelGraphTitle": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "label-graph-title",
            "reflect": false,
            "defaultValue": "'Screen overview'"
        },
        "labelGraphSubtitle": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "label-graph-subtitle",
            "reflect": false,
            "defaultValue": "'Click on a screen for fast navigation.'"
        }
    }; }
    static get states() { return {
        "advanced": {}
    }; }
    static get methods() { return {
        "getStoredFiles": {
            "complexType": {
                "signature": "() => Promise<string[]>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<string[]>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        },
        "metadata": {
            "complexType": {
                "signature": "<T extends never>(key: T, value: ModuleMetadata[T]) => Promise<void>",
                "parameters": [{
                        "tags": [],
                        "text": ""
                    }, {
                        "tags": [],
                        "text": ""
                    }],
                "references": {
                    "Promise": {
                        "location": "global"
                    },
                    "ModuleMetadata": {
                        "location": "import",
                        "path": "../../models/module"
                    },
                    "T": {
                        "location": "global"
                    },
                    "Module": {
                        "location": "import",
                        "path": "../../models/module"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        }
    }; }
    static get elementRef() { return "el"; }
}
