import { h, Host, } from "@stencil/core";
import { _t } from "../i18n/i18n";
export class FormPage {
  constructor() {
    this.clickSubmit = () => {
      if (this.canSubmit)
        this.submit();
    };
    this.clickCancel = () => this.cancel();
    this.canSubmit = false;
    this.backText = _t("webmapgl.form-page.back");
    this.facets = undefined;
    this.fields = undefined;
    this.formFacet = undefined;
    this.label = undefined;
    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, placeholder: field.placeholder }, this.renderOptions(field.options))));
  }
  renderOptions(options) {
    if (options == undefined)
      return;
    return options.map((option) => (h("gl-option", { image: option.image, label: option.label, value: option.value })));
  }
  render() {
    let small = screen.width <= 640;
    return (h(Host, { class: `gl-form-page-facet-${this.formFacet || "none"}` }, 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.clickCancel }, h("ion-icon", { slot: small ? "icon-only" : "start", name: "close" }), small ? null : this.cancelText), h("ion-button", { onClick: this.clickSubmit, 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 originalStyleUrls() {
    return {
      "$": ["form-page.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["form-page.css"]
    };
  }
  static get properties() {
    return {
      "backText": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Text for the back button."
        },
        "attribute": "back-text",
        "reflect": false,
        "defaultValue": "_t(\"webmapgl.form-page.back\")"
      },
      "facets": {
        "type": "unknown",
        "mutable": false,
        "complexType": {
          "original": "any[]",
          "resolved": "any[]",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Facets for the page."
        }
      },
      "fields": {
        "type": "unknown",
        "mutable": false,
        "complexType": {
          "original": "any[]",
          "resolved": "any[]",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Fields for the page."
        }
      },
      "formFacet": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Currently-selected facet. It is used the set the CSS class of the page."
        },
        "attribute": "form-facet",
        "reflect": false
      },
      "label": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Label text displayed in the form toolbar."
        },
        "attribute": "label",
        "reflect": false
      },
      "root": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "This is the root page in the form. If it is `true`, the back button\nis not displayed."
        },
        "attribute": "root",
        "reflect": false,
        "defaultValue": "false"
      },
      "submitText": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Text for the submit button."
        },
        "attribute": "submit-text",
        "reflect": false,
        "defaultValue": "_t(\"webmapgl.form-page.submit\")"
      },
      "cancelText": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Text for the cancel button."
        },
        "attribute": "cancel-text",
        "reflect": false,
        "defaultValue": "_t(\"webmapgl.form-page.cancel\")"
      }
    };
  }
  static get states() {
    return {
      "canSubmit": {}
    };
  }
  static get elementRef() { return "el"; }
  static get listeners() {
    return [{
        "name": "glFormFeatureChanged",
        "method": "updateValidationStatus",
        "target": "body",
        "capture": false,
        "passive": false
      }];
  }
}
//# sourceMappingURL=form-page.js.map
