import { h } from "@stencil/core";
export class ElementFormEditor {
    constructor() {
        this.hack = 0;
        this.addInput = (current) => {
            const insert = {
                id: window.BCE.generateId(),
                label: '',
                required: false,
                type: 'text'
            };
            const value = [...current, insert];
            this.handler.set('input', value, { emit: true, localize: true });
            setTimeout(() => this.hack++, 60);
        };
        this.editInput = (id, event, prop, value) => {
            const index = this.input.findIndex(i => i.id === id);
            const copy = [...this.input];
            const update = Object.assign(Object.assign({}, this.input[index]), { [prop]: value });
            copy.splice(index, 1, update);
            this.handler.set('input', copy, { emit: true, localize: true });
            event.stopPropagation();
        };
        this.removeInput = (current, id) => {
            const value = current.filter(v => v.id !== id);
            this.handler.set('input', value, { emit: true, localize: true });
            setTimeout(() => this.hack++, 60);
        };
    }
    get input() {
        return this.handler.get('input', { localize: true });
    }
    prop(path, options = {}) {
        return this.handler.prop(path, Object.assign({}, options));
    }
    renderInputCreator(current, input) {
        const edit = this.editInput.bind(this, input.id);
        return (h("div", { class: "input-creator", id: input.id, key: input.id },
            h("bce-select", { placeholder: "Type", type: "dropdown", value: input.type, onInput: (e) => edit(e, 'type', e.target.value) },
                h("bce-option", { value: "date" }, "Date"),
                h("bce-option", { value: "text" }, "Text")),
            h("bce-input", { placeholder: "Label", value: input.label, onInput: (e) => edit(e, 'label', e.target.value || '') }),
            h("label", null, this.t('me-required')),
            h("bce-switch", { value: input.required, onInput: (e) => edit(e, 'required', e.target.value) }),
            h("bce-button", { design: "text", icon: "fas:trash", onClick: () => this.removeInput(current, input.id) })));
    }
    render() {
        const inputProp = this.prop('input', { default: () => [], localize: true });
        const input = inputProp.value;
        return [
            input.map(i => this.renderInputCreator(input, i)),
            h("bce-button", { design: "text", icon: "fas:plus", onClick: () => this.addInput(input), "data-i": this.hack }, this.t('add-item', { item: 'Input' })),
            h("slot", null)
        ];
    }
    static get is() { return "bce-element-form-editor"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "$": ["bce-element-form-editor.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["bce-element-form-editor.css"]
    }; }
    static get properties() { return {
        "handler": {
            "type": "unknown",
            "mutable": false,
            "complexType": {
                "original": "InputHandler",
                "resolved": "InputHandler",
                "references": {
                    "InputHandler": {
                        "location": "import",
                        "path": "../../../utils/input-handler"
                    }
                }
            },
            "required": true,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            }
        },
        "language": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string | undefined",
                "references": {}
            },
            "required": false,
            "optional": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "language",
            "reflect": false
        },
        "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-form\" | \"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": true,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            }
        }
    }; }
    static get states() { return {
        "hack": {}
    }; }
}
