import { StringUtil, TranslateService } from '@ema/core';
export class EntityForm {
    constructor() {
        this.translateService = TranslateService.instance;
    }
    async setData(data) {
        this.data = data;
    }
    async setDefinitions(data) {
        this.definitions = data;
    }
    translate(str) {
        return this.translateService.get(str);
    }
    renderFormField(key) {
        let field = {
            "label": key,
            "tag": "input",
            "type": "text",
            "placeholder": "",
            "hidden": false,
            "disabled": false
        };
        let fieldData;
        let styles = {};
        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);
        fieldData = this.parseField(key, field);
        if (field.hidden || field.type === 'hidden')
            styles.display = "none";
        if (field.tag === 'input' && (field.type === 'text' ||
            field.type === 'password' ||
            field.type === 'date' ||
            field.type === 'datetime' ||
            field.type === 'datetime-local')) {
            return (h("ema-form-field", { key: key, value: this.data[key], "config-json": JSON.stringify(field), "data-json": JSON.stringify(fieldData), styles: styles }));
        }
        if (field.tag === 'input' && field.type === 'checkbox') {
            if (typeof this.data[key] === 'boolean' || typeof this.data[key] === 'number') {
                return (h("div", { class: "form-group row", style: styles },
                    h("label", { class: "col-md-4 col-form-label", htmlFor: key }, StringUtil.uppercaseFirst(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" })));
            }
            if (fieldData && fieldData.length) {
                let arrayName = key + '[]';
                return (h("div", { class: "form-group row", style: styles },
                    h("label", { class: "col-md-4 col-form-label", htmlFor: key }, StringUtil.uppercaseFirst(this.translate(field.label))),
                    h("div", { class: "col-md-8" }, fieldData.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" })));
            }
        }
        if (field.tag === 'input' && field.type === 'radio') {
            if (fieldData && fieldData.length) {
                return (h("div", { class: "form-group row", style: styles },
                    h("label", { class: "col-md-4 col-form-label", htmlFor: key }, StringUtil.uppercaseFirst(this.translate(field.label))),
                    h("div", { class: "col-md-8" }, fieldData.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" })));
            }
        }
        if (field.tag === 'textarea') {
            return (h("div", { class: "form-group row", style: styles },
                h("label", { htmlFor: key, class: "col-md-4 col-form-label" }, StringUtil.uppercaseFirst(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" })));
        }
        if (field.tag === 'select' && fieldData) {
            return (h("div", { class: "form-group row", style: styles },
                h("label", { htmlFor: key, class: "col-md-4 col-form-label" }, StringUtil.uppercaseFirst(this.translate(field.label))),
                h("div", { class: "col-md-8" },
                    h("select", { name: key, class: "form-control" }, fieldData.map(function (item) {
                        return h("option", { value: item.value, selected: item.selected }, item.text);
                    }))),
                h("div", { class: "col-md-8 offset-md-4 messages" })));
        }
    }
    parseField(key, field) {
        let fieldData;
        let fieldRelationship;
        if (this.entity.relationships) {
            Object.keys(this.entity.relationships).forEach((k, i) => {
                if (k.match('field_' + key)) {
                    fieldRelationship = this.entity.relationships[k];
                }
            });
        }
        if (fieldRelationship && fieldRelationship.data) {
            fieldData = fieldRelationship.data;
        }
        if (field.tag === 'select') {
            fieldData = this.parseFieldDataArray(key, fieldData);
        }
        if (field.tag === 'input' && field.type === 'checkbox') {
            fieldData = this.parseFieldDataArray(key, fieldData);
        }
        if (field.tag === 'input' && field.type === 'radio') {
            fieldData = this.parseFieldDataArray(key, fieldData);
        }
        return fieldData;
    }
    parseFieldDataArray(key, fieldData) {
        if (!fieldData && Array.isArray(this.data[key])) {
            fieldData = this.data[key];
        }
        else {
            if (fieldData) {
                fieldData.map((item) => {
                    if (this.data[key] == item.value) {
                        item.selected = true;
                    }
                });
            }
        }
        return fieldData;
    }
    render() {
        let entity = {};
        if (this.definitionsJson) {
            this.definitions = JSON.parse(this.definitionsJson);
        }
        if (this.dataJson) {
            this.data = JSON.parse(this.dataJson);
        }
        if (this.data) {
            entity = this.entity = this.data;
        }
        if (entity.attributes) {
            this.data = entity.attributes;
        }
        else {
            this.data = entity;
        }
        if (entity.type) {
            this.type = entity.type;
        }
        this.dataCopy = JSON.parse(JSON.stringify(entity));
        return (h("div", null, Object.keys(this.data).map((key) => {
            return this.renderFormField(key);
        })));
    }
    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"
        },
        "setData": {
            "method": true
        },
        "setDefinitions": {
            "method": true
        }
    }; }
}
