import { h } from '@stencil/core';
import { _t } from '../i18n/i18n';
export class Form {
    constructor() {
        this.formId = `gl-form-${formId++}`;
        this.translateText = false;
    }
    async componentWillLoad() {
        let res = await fetch(this.schema);
        this._schema = await res.json();
    }
    componentDidLoad() {
        let page = this.createFormPage(this.label);
        this.el.querySelector('ion-nav').setRoot(page);
    }
    setValue(e) {
        if (!this.feature)
            return;
        this.feature.properties = this.feature.properties || {};
        this.feature.properties[e.detail.field.attribute] = e.detail.value;
        this.glFormFeatureChanged.emit({
            formId: this.formId,
            feature: this.feature
        });
    }
    handleFacet(e) {
        let page = this.createFormPage(e.detail.label, e.detail.value);
        this.el.querySelector('ion-nav').push(page);
    }
    async cancel() {
        this.glFormCancel.emit({
            formId: this.formId,
            feature: this.feature
        });
    }
    async submit() {
        this.glFormSubmit.emit({
            formId: this.formId,
            feature: this.feature
        });
    }
    createFormPage(label, formFacet) {
        let page = document.createElement('gl-form-page');
        page.formFacet = formFacet;
        page.facets = this.filter(this._schema.facets || [], formFacet);
        page.fields = this.filter(this._schema.fields || [], formFacet);
        page.root = !formFacet;
        if (label)
            page.label = label;
        if (this.submitText)
            page.submitText = this.submitText;
        if (this.cancelText)
            page.cancelText = this.cancelText;
        return page;
    }
    filter(items, formFacet) {
        return items.filter((item) => {
            let facets = item.facets || [];
            if (!facets.length && !formFacet)
                return true;
            for (let facet of facets) {
                let escaped = facet.replace(/[.?+^$[\]\\(){}|-]/g, '\\$&');
                let re = new RegExp('^' + escaped.split('*').join('.*') + '$');
                if (re.test(formFacet))
                    return true;
            }
            return false;
        }).map((item) => {
            let result = Object.assign({}, item);
            if (this.translateText)
                result.label = _t(item.label);
            if (item.options)
                result.options = this.filter(item.options, formFacet);
            return result;
        });
    }
    render() {
        return (h("ion-nav", null));
    }
    static get is() { return "gl-form"; }
    static get properties() { return {
        "cancelText": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "cancel-text",
            "reflect": false
        },
        "feature": {
            "type": "any",
            "mutable": false,
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "feature",
            "reflect": false
        },
        "formId": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "form-id",
            "reflect": false,
            "defaultValue": "`gl-form-${formId++}`"
        },
        "label": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "label",
            "reflect": false
        },
        "schema": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "schema",
            "reflect": false
        },
        "submitText": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "submit-text",
            "reflect": false
        },
        "translateText": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "translate-text",
            "reflect": false,
            "defaultValue": "false"
        }
    }; }
    static get events() { return [{
            "method": "glFormCancel",
            "name": "glFormCancel",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }, {
            "method": "glFormFeatureChanged",
            "name": "glFormFeatureChanged",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }, {
            "method": "glFormSubmit",
            "name": "glFormSubmit",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            }
        }]; }
    static get methods() { return {
        "cancel": {
            "complexType": {
                "signature": "() => Promise<void>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        },
        "submit": {
            "complexType": {
                "signature": "() => Promise<void>",
                "parameters": [],
                "references": {
                    "Promise": {
                        "location": "global"
                    }
                },
                "return": "Promise<void>"
            },
            "docs": {
                "text": "",
                "tags": []
            }
        }
    }; }
    static get elementRef() { return "el"; }
    static get listeners() { return [{
            "name": "glFieldValueChanged",
            "method": "setValue",
            "target": undefined,
            "capture": false,
            "passive": false
        }, {
            "name": "glFormFacet",
            "method": "handleFacet",
            "target": undefined,
            "capture": false,
            "passive": false
        }]; }
}
let formId = 0;
