'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index$1 = require('./index-578e90b1.js');

const ElementFormEditor = class {
    constructor(hostRef) {
        index$1.registerInstance(this, hostRef);
        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 });
            setTimeout(() => this.hack++, 60);
            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 (index$1.h("div", { class: "input-creator", id: input.id, key: input.id }, index$1.h("bce-select", { placeholder: "Type", type: "dropdown", value: input.type, onInput: (e) => edit(e, 'type', e.target.value) }, index$1.h("bce-option", { value: "date" }, "Date"), index$1.h("bce-option", { value: "radio" }, "Radio"), index$1.h("bce-option", { value: "text" }, "Text")), index$1.h("bce-input", { placeholder: this.t('label'), value: input.label, onInput: (e) => edit(e, 'label', e.target.value || '') }, index$1.h("label", null, this.t('me-required')), index$1.h("bce-switch", { value: input.required, onInput: (e) => edit(e, 'required', e.target.value) }), index$1.h("bce-button", { design: "text", icon: "fas:trash", onClick: () => this.removeInput(current, input.id) })), input.type === 'radio' && (index$1.h("bce-select", { class: "options", type: "input", value: input.options, onInput: (e) => edit(e, 'options', e.target.value) }))));
    }
    render() {
        const inputProp = this.prop('input', { default: () => [], localize: true });
        const input = inputProp.value;
        return [
            input.map(i => this.renderInputCreator(input, i)),
            index$1.h("bce-button", { design: "text", icon: "fas:plus", onClick: () => this.addInput(input), "data-i": this.hack }, this.t('add-item', { item: this.t('me-input') })),
            index$1.h("slot", null)
        ];
    }
    static get style() { return ":host{position:relative;display:block}:host .input-creator{display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;-ms-flex-align:center;align-items:center;margin:20px 0}:host .input-creator bce-select,:host .input-creator bce-input{margin:0}:host .input-creator bce-select,:host .input-creator bce-input{-ms-flex:1 1 auto;flex:1 1 auto}:host .input-creator label{margin:0 16px}:host .input-creator bce-switch{-ms-flex:0 0 auto;flex:0 0 auto;margin:0 16px 0 0}:host .input-creator .options{-ms-flex:0 1 100%;flex:0 1 100%}\@media screen and (min-width: 1024px){:host .input-creator bce-select{-ms-flex:0 0 auto;flex:0 0 auto}}"; }
};

exports.bce_element_form_editor = ElementFormEditor;
