import { _t } from '../i18n/i18n';
export class FormPage {
    constructor() {
        this.canSubmit = false;
        this.backText = _t('webmapgl.form-page.back');
        this.root = false;
        this.submitText = _t('webmapgl.form-page.submit');
        this.cancelText = _t('webmapgl.form-page.cancel');
    }
    componentDidLoad() {
        this.updateValidationStatus();
    }
    async updateValidationStatus() {
        if (this.el.querySelectorAll('gl-field').length === 0) {
            this.canSubmit = false;
        }
        else {
            this.canSubmit = (await this.validate()).length === 0;
        }
    }
    async validate() {
        let messages = await Promise.all(Array.from(this.el.querySelectorAll('gl-field'))
            .map(async (field) => await field.validate()));
        return messages.filter((message) => message !== null);
    }
    cancel() {
        const form = this.el.closest('gl-form');
        form.cancel();
    }
    submit() {
        const form = this.el.closest('gl-form');
        form.submit();
    }
    renderFacets() {
        return this.facets.map((facet) => (h("gl-facet", { label: facet.label, value: facet.value, image: facet.image, widget: facet.widget })));
    }
    renderFields() {
        return this.fields.map((field) => (h("gl-field", { attribute: field.attribute, label: field.label, image: field.image, required: field.required, type: field.type, widget: field.widget }, this.renderOptions(field.options))));
    }
    renderOptions(options) {
        if (!options)
            return;
        return options.map((option) => (h("gl-option", { image: option.image, label: option.label, value: option.value })));
    }
    hostData() {
        return {
            class: `gl-form-page-facet-${this.formFacet || 'none'}`
        };
    }
    render() {
        let small = screen.width <= 640;
        return ([
            h("ion-header", null,
                h("ion-toolbar", { color: "primary" },
                    (!this.root) ? h("ion-buttons", { slot: "start" },
                        h("ion-nav-pop", null,
                            h("ion-button", null,
                                h("ion-icon", { slot: (small) ? 'icon-only' : 'start', name: "arrow-back" }),
                                (small) ? null : this.backText))) : null,
                    h("ion-title", null, this.label),
                    h("ion-buttons", { slot: "end" },
                        h("ion-button", { onClick: () => this.cancel() },
                            h("ion-icon", { slot: (small) ? 'icon-only' : 'start', name: "close" }),
                            (small) ? null : this.cancelText),
                        h("ion-button", { onClick: () => { if (this.canSubmit)
                                this.submit(); }, disabled: !this.canSubmit },
                            h("ion-icon", { slot: (small) ? 'icon-only' : 'start', name: "checkmark" }),
                            (small) ? null : this.submitText)))),
            h("ion-content", null,
                h("ion-list", null,
                    this.renderFacets(),
                    this.renderFields()))
        ]);
    }
    static get is() { return "gl-form-page"; }
    static get properties() { return {
        "backText": {
            "type": String,
            "attr": "back-text"
        },
        "cancelText": {
            "type": String,
            "attr": "cancel-text"
        },
        "canSubmit": {
            "state": true
        },
        "el": {
            "elementRef": true
        },
        "facets": {
            "type": "Any",
            "attr": "facets"
        },
        "fields": {
            "type": "Any",
            "attr": "fields"
        },
        "formFacet": {
            "type": String,
            "attr": "form-facet"
        },
        "label": {
            "type": String,
            "attr": "label"
        },
        "root": {
            "type": Boolean,
            "attr": "root"
        },
        "submitText": {
            "type": String,
            "attr": "submit-text"
        }
    }; }
    static get listeners() { return [{
            "name": "body:glFormFeatureChanged",
            "method": "updateValidationStatus"
        }]; }
    static get style() { return "/**style-placeholder:gl-form-page:**/"; }
}
