import { _t } from '../i18n/i18n';
export class Field {
    constructor() {
        this.required = false;
    }
    optionChanged(e) {
        this.changed(e.detail);
    }
    _getValue() {
        const form = this.el.closest('gl-form');
        if (!form.feature || !form.feature.properties)
            return;
        return form.feature.properties[this.attribute];
    }
    async isValid() {
        return this.validate() === null;
    }
    async getValue() {
        return this._getValue();
    }
    async validate() {
        const value = await this.getValue();
        if (this.required &&
            (value === undefined || value === null || value === ''))
            return _t('webmapgl.field.required', { field: this.label });
        return null;
    }
    changed(value) {
        this.glFieldValueChanged.emit({
            field: this,
            value: value
        });
    }
    getRadioField() {
        return ([
            h("ion-list-header", null, this.label),
            h("ion-radio-group", null,
                h("slot", null))
        ]);
    }
    getSelectField() {
        return (h("ion-item", null,
            h("ion-label", null, this.label),
            ",",
            h("ion-select", { onIonChange: (e) => this.changed(e.detail.value), value: this.getValue() },
                h("slot", null))));
    }
    getTextareaField() {
        return (h("ion-item", { "text-wrap": true },
            h("ion-label", { position: "floating" }, this.label),
            h("ion-textarea", { onIonInput: (e) => this.changed(e.detail.target.value), value: this._getValue() || '' })));
    }
    getInputField() {
        return (h("ion-item", { "text-wrap": true },
            h("ion-label", { position: "floating" }, this.label),
            h("ion-input", { onIonInput: (e) => this.changed(e.detail.target.value), type: "text", value: this._getValue() })));
    }
    render() {
        if (this.widget === 'radio') {
            return this.getRadioField();
        }
        else if (this.widget === 'select') {
            return this.getSelectField();
        }
        else if (this.widget == 'textarea') {
            return this.getTextareaField();
        }
        else {
            return this.getInputField();
        }
    }
    static get is() { return "gl-field"; }
    static get properties() { return {
        "attribute": {
            "type": String,
            "attr": "attribute"
        },
        "el": {
            "elementRef": true
        },
        "getValue": {
            "method": true
        },
        "image": {
            "type": String,
            "attr": "image"
        },
        "isValid": {
            "method": true
        },
        "label": {
            "type": String,
            "attr": "label"
        },
        "message": {
            "state": true
        },
        "required": {
            "type": Boolean,
            "attr": "required"
        },
        "type": {
            "type": "Any",
            "attr": "type"
        },
        "validate": {
            "method": true
        },
        "widget": {
            "type": String,
            "attr": "widget"
        }
    }; }
    static get events() { return [{
            "name": "glFieldValueChanged",
            "method": "glFieldValueChanged",
            "bubbles": true,
            "cancelable": true,
            "composed": true
        }]; }
    static get listeners() { return [{
            "name": "glOptionChanged",
            "method": "optionChanged"
        }]; }
}
