var __spreadArrays = (this && this.__spreadArrays) || function () {
    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
    for (var r = Array(s), k = 0, i = 0; i < il; i++)
        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
            r[k] = a[j];
    return r;
};
import { r as registerInstance, h } from './index-b13326fc.js';
var ElementFormEditor = /** @class */ (function () {
    function ElementFormEditor(hostRef) {
        var _this = this;
        registerInstance(this, hostRef);
        this.hack = 0;
        this.addInput = function (current) {
            var insert = {
                id: window.BCE.generateId(),
                label: '',
                required: false,
                type: 'text'
            };
            var value = __spreadArrays(current, [insert]);
            _this.handler.set('input', value, { emit: true, localize: true });
            setTimeout(function () { return _this.hack++; }, 60);
        };
        this.editInput = function (id, event, prop, value) {
            var _a;
            var index = _this.input.findIndex(function (i) { return i.id === id; });
            var copy = __spreadArrays(_this.input);
            var update = Object.assign(Object.assign({}, _this.input[index]), (_a = {}, _a[prop] = value, _a));
            copy.splice(index, 1, update);
            _this.handler.set('input', copy, { emit: true, localize: true });
            event.stopPropagation();
        };
        this.removeInput = function (current, id) {
            var value = current.filter(function (v) { return v.id !== id; });
            _this.handler.set('input', value, { emit: true, localize: true });
            setTimeout(function () { return _this.hack++; }, 60);
        };
    }
    Object.defineProperty(ElementFormEditor.prototype, "input", {
        get: function () {
            return this.handler.get('input', { localize: true });
        },
        enumerable: true,
        configurable: true
    });
    ElementFormEditor.prototype.prop = function (path, options) {
        if (options === void 0) { options = {}; }
        return this.handler.prop(path, Object.assign({}, options));
    };
    ElementFormEditor.prototype.renderInputCreator = function (current, input) {
        var _this = this;
        var 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: function (e) { return 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: function (e) { return edit(e, 'label', e.target.value || ''); } }), h("label", null, this.t('me-required')), h("bce-switch", { value: input.required, onInput: function (e) { return edit(e, 'required', e.target.value); } }), h("bce-button", { design: "text", icon: "fas:trash", onClick: function () { return _this.removeInput(current, input.id); } })));
    };
    ElementFormEditor.prototype.render = function () {
        var _this = this;
        var inputProp = this.prop('input', { default: function () { return []; }, localize: true });
        var input = inputProp.value;
        return [
            input.map(function (i) { return _this.renderInputCreator(input, i); }),
            h("bce-button", { design: "text", icon: "fas:plus", onClick: function () { return _this.addInput(input); }, "data-i": this.hack }, this.t('add-item', { item: 'Input' })),
            h("slot", null)
        ];
    };
    Object.defineProperty(ElementFormEditor, "style", {
        get: function () { return ":host{position:relative;display:block}:host .input-creator{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin:20px 0}:host .input-creator bce-input,:host .input-creator bce-select{margin:0}: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}"; },
        enumerable: true,
        configurable: true
    });
    return ElementFormEditor;
}());
export { ElementFormEditor as bce_element_form_editor };
