import { TranslateService } from "../../lib";
export class EntityForm {
    constructor() {
        this.translateService = TranslateService.instance;
    }
    translate(str) {
        return this.translateService.get(str);
    }
    renderFormField(key) {
        let field = {
            "label": key,
            "tag": "input",
            "type": "text",
            "placeholder": "",
            "hidden": false,
            "disabled": false
        };
        if (this.definitions && this.definitions[key]) {
            Object.keys(this.definitions[key]).forEach((k, i) => {
                field[k] = this.definitions[key][k];
            });
        }
        field.label = this.translate(field.label);
        let styles = {};
        if (field.hidden || field.type === 'hidden')
            styles.display = "none";
        // input: text & password
        if (field.tag === 'input' && (field.type === 'text' || field.type === 'password')) {
            return (h("div", { class: "form-group row", style: styles },
                h("label", { class: "col-md-4 col-form-label", htmlfor: key }, this.translate(field.label)),
                h("div", { class: "col-md-8" },
                    h("input", { class: "form-control", name: key, placeholder: field.placeholder, disabled: field.disabled, hidden: field.hidden, type: field.type, value: this.data[key] })),
                h("div", { class: "col-md-8 offset-md-4 messages" })));
        }
        // input: checkbox
        if (field.tag === 'input' && field.type === 'checkbox') {
            // checkbox boolean
            if (typeof this.data[key] === 'boolean') {
                return (h("div", { class: "form-group row", style: styles },
                    h("label", { class: "col-md-4 col-form-label", htmlfor: key }, this.translate(field.label)),
                    h("div", { class: "col-md-8" },
                        h("div", { class: "form-check form-check-inline" },
                            h("label", { class: "form-check-label" },
                                h("input", { class: "form-check-input", name: key, type: field.type, disabled: field.disabled, checked: this.data[key], hidden: field.hidden, value: this.data[key] })))),
                    h("div", { class: "col-md-8 offset-md-4 messages" })));
            }
            // checkboxes array
            if (typeof this.data[key] === 'object') {
                let arrayName = key + '[]';
                return (h("div", { class: "form-group row", style: styles },
                    h("label", { class: "col-md-4 col-form-label", htmlfor: key }, this.translate(field.label)),
                    h("div", { class: "col-md-8" }, this.data[key].map(function (item) {
                        return h("div", { class: "form-check form-check-inline" },
                            h("label", { class: "form-check-label" },
                                h("input", { class: "form-check-input", name: arrayName, type: field.type, disabled: field.disabled, hidden: field.hidden, checked: item.selected, value: item.value }),
                                item.text));
                    })),
                    h("div", { class: "col-md-8 offset-md-4 messages" })));
            }
        }
        // input: radio
        if (field.tag === 'input' && field.type === 'radio') {
            return (h("div", { class: "form-group row", style: styles },
                h("label", { class: "col-md-4 col-form-label", htmlfor: key }, this.translate(field.label)),
                h("div", { class: "col-md-8" }, this.data[key].map(function (item) {
                    return h("div", { class: "form-check" },
                        h("label", { class: "form-check-label" },
                            h("input", { class: "form-check-input", name: key, type: field.type, disabled: field.disabled, hidden: field.hidden, checked: item.selected, value: item.value }),
                            item.text));
                })),
                h("div", { class: "col-md-8 offset-md-4 messages" })));
        }
        // textarea
        if (field.tag === 'textarea') {
            return (h("div", { class: "form-group row", style: styles },
                h("label", { htmlFor: key, class: "col-md-4 col-form-label" }, this.translate(field.label)),
                h("div", { class: "col-md-8" },
                    h("textarea", { class: "form-control", name: key, placeholder: field.placeholder, disabled: field.disabled, hidden: field.hidden, value: this.data[key], cols: 40, rows: 5 })),
                h("div", { class: "col-md-8 offset-md-4 messages" })));
        }
        // select
        if (field.tag === 'select') {
            return (h("div", { class: "form-group row", style: styles },
                h("label", { htmlfor: key, class: "col-md-4 col-form-label" }, this.translate(field.label)),
                h("div", { class: "col-md-8" },
                    h("select", { name: key, class: "form-control" }, this.data[key].map(function (item) {
                        return h("option", { value: item.value, selected: item.selected }, item.text);
                    }))),
                h("div", { class: "col-md-8 offset-md-4 messages" })));
        }
    }
    render() {
        let object;
        if (this.definitionsJson) {
            this.definitions = JSON.parse(this.definitionsJson);
        }
        if (this.dataJson) {
            object = JSON.parse(this.dataJson);
            if (object.attributes) {
                this.data = object.attributes;
            }
            else {
                this.data = object;
            }
            this.dataCopy = JSON.parse(JSON.stringify(this.data));
            return (h("div", null, Object.keys(this.data).map((key) => {
                return this.renderFormField(key);
            })));
        }
        else {
            return (h("div", null));
        }
    }
    static get is() { return "ema-entity-form"; }
    static get properties() { return {
        "data": {
            "state": true
        },
        "dataJson": {
            "type": String,
            "attr": "data-json"
        },
        "definitionsJson": {
            "type": String,
            "attr": "definitions-json"
        },
        "language": {
            "type": String,
            "attr": "language"
        }
    }; }
}
//# sourceMappingURL=entity-form.js.map