import { h } from '@stencil/core';
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", null,
            h("ion-label", { "text-wrap": true, position: "floating" }, this.label),
            h("ion-textarea", { onIonInput: (e) => this.changed(e.detail.target.value), value: this._getValue() || '' })));
    }
    getInputField() {
        return (h("ion-item", null,
            h("ion-label", { "text-wrap": true, 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",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "attribute",
            "reflect": false
        },
        "image": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "image",
            "reflect": false
        },
        "label": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "label",
            "reflect": false
        },
        "required": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "required",
            "reflect": false,
            "defaultValue": "false"
        },
        "type": {
            "type": "any",
            "mutable": false,
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "type",
            "reflect": false
        },
        "widget": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "widget",
            "reflect": false
        }
    }; }
    static get states() { return {
        "message": {}
    }; }
    static get events() { return [{
            "method": "glFieldValueChanged",
            "name": "glFieldValueChanged",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }]; }
    static get methods() { return {
        "isValid": {
            "complexType": {
                "signature": "() => Promise<boolean>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<boolean>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        },
        "getValue": {
            "complexType": {
                "signature": "() => Promise<any>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<any>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        },
        "validate": {
            "complexType": {
                "signature": "() => Promise<string>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<string>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        }
    }; }
    static get elementRef() { return "el"; }
    static get listeners() { return [{
            "name": "glOptionChanged",
            "method": "optionChanged",
            "target": undefined,
            "capture": false,
            "passive": false
        }]; }
}
