import { _t } from '../i18n/i18n';
export class Form {
    constructor() {
        this.formId = `gl-form-${formId++}`;
        this.translate = 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.translate)
                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 {
        "cancel": {
            "method": true
        },
        "cancelText": {
            "type": String,
            "attr": "cancel-text"
        },
        "el": {
            "elementRef": true
        },
        "feature": {
            "type": "Any",
            "attr": "feature"
        },
        "formId": {
            "type": String,
            "attr": "form-id"
        },
        "label": {
            "type": String,
            "attr": "label"
        },
        "schema": {
            "type": String,
            "attr": "schema"
        },
        "submit": {
            "method": true
        },
        "submitText": {
            "type": String,
            "attr": "submit-text"
        },
        "translate": {
            "type": Boolean,
            "attr": "translate"
        }
    }; }
    static get events() { return [{
            "name": "glFormCancel",
            "method": "glFormCancel",
            "bubbles": true,
            "cancelable": true,
            "composed": true
        }, {
            "name": "glFormFeatureChanged",
            "method": "glFormFeatureChanged",
            "bubbles": true,
            "cancelable": true,
            "composed": true
        }, {
            "name": "glFormSubmit",
            "method": "glFormSubmit",
            "bubbles": true,
            "cancelable": true,
            "composed": true
        }]; }
    static get listeners() { return [{
            "name": "glFieldValueChanged",
            "method": "setValue"
        }, {
            "name": "glFormFacet",
            "method": "handleFacet"
        }]; }
}
let formId = 0;
