import { StringUtil, TranslateService, Util } from "@ema/core";
export class FormField {
    constructor() {
        this.data = {};
        this.config = {
            "label": "",
            "tag": "input",
            "type": "text",
            "placeholder": "",
            "hidden": false,
            "disabled": false
        };
        this.key = '';
        this.tag = 'input';
        this.type = 'text';
        this.translateService = TranslateService.instance;
    }
    componentDidLoad() {
        this.postRender();
    }
    componentDidUpdate() {
        this.postRender();
    }
    postRender() {
        if (this.config.hidden || this.config.type === 'hidden')
            this.el.style.display = "none";
        this.change.emit({ value: this.currentValue, el: this.el });
    }
    async setData(data) {
        this.data = data;
    }
    async getValue() {
        return this.currentValue;
    }
    translate(str) {
        return this.translateService.get(str);
    }
    render() {
        let field;
        let fieldData;
        if (this.dataJson) {
            this.data = Object.assign({}, this.data, JSON.parse(this.dataJson));
            fieldData = this.data;
        }
        if (this.configJson) {
            this.config = Object.assign({}, this.config, JSON.parse(this.configJson));
            field = this.config;
        }
        if (this.value) {
            this.currentValue = Util.tryParseJSON(this.value) || this.value;
        }
        return (h("div", null, field.tag === 'input' && (field.type === 'text' ||
            field.type === 'password' ||
            field.type === 'date' ||
            field.type === 'datetime' ||
            field.type === 'datetime-local') &&
            h("div", { class: "form-group row", style: this.styles },
                h("label", { class: "col-md-4 col-form-label", htmlFor: this.key }, StringUtil.uppercaseFirst(this.translate(field.label))),
                h("div", { class: "col-md-8" },
                    h("input", { class: "form-control", name: this.key, placeholder: field.placeholder, disabled: field.disabled, hidden: field.hidden, type: field.type, value: this.currentValue })),
                h("div", { class: "col-md-8 offset-md-4 messages" }))));
    }
    static get is() { return "ema-form-field"; }
    static get properties() { return {
        "config": {
            "state": true
        },
        "configJson": {
            "type": String,
            "attr": "config-json"
        },
        "currentValue": {
            "state": true
        },
        "data": {
            "state": true
        },
        "dataJson": {
            "type": String,
            "attr": "data-json"
        },
        "el": {
            "elementRef": true
        },
        "getValue": {
            "method": true
        },
        "key": {
            "type": String,
            "attr": "key"
        },
        "setData": {
            "method": true
        },
        "styles": {
            "type": "Any",
            "attr": "styles"
        },
        "tag": {
            "type": String,
            "attr": "tag"
        },
        "type": {
            "type": String,
            "attr": "type"
        },
        "value": {
            "type": "Any",
            "attr": "value"
        }
    }; }
    static get events() { return [{
            "name": "change",
            "method": "change",
            "bubbles": true,
            "cancelable": true,
            "composed": true
        }]; }
}
