import { h, Host, } from "@stencil/core";
import { _t } from "../i18n/i18n";
export class Field {
  constructor() {
    this.onChange = (e) => this.changed(e.detail.value);
    this.onInput = (e) => this.changed(e.detail.value);
    this.message = undefined;
    this.attribute = undefined;
    this.image = undefined;
    this.label = undefined;
    this.placeholder = undefined;
    this.required = false;
    this.type = undefined;
    this.widget = undefined;
  }
  optionChanged(e) {
    this.changed(e.detail);
  }
  _getValue() {
    const form = this.el.closest("gl-form");
    if (form.feature == undefined || form.feature.properties == undefined)
      return;
    return form.feature.properties[this.attribute];
  }
  /**
   * Returns whether this field is valid
   * @returns
   */
  async isValid() {
    return this.validate() == null;
  }
  /**
   * Returns the value of the attribute of the feature this form is editing
   * @returns value of the attribute of the feature
   */
  async getValue() {
    return this._getValue();
  }
  /**
   * Checks whether the value is required and also present
   * If it is not returns an error text, if it is valid returns null
   * @returns
   */
  async validate() {
    const value = await this.getValue();
    if (this.required && (value == undefined || value === ""))
      return _t("webmapgl.field.required", { field: this.label });
    return null;
  }
  changed(value) {
    this.glFieldValueChanged.emit({
      field: this,
      value: value,
    });
  }
  getRadioField() {
    return (h(Host, null, h("ion-list-header", null, this.label), h("ion-radio-group", { onIonChange: this.onChange }, h("slot", null))));
  }
  getSelectField() {
    return (h("ion-item", null, h("ion-label", null, this.label), ",", h("ion-select", { onIonChange: this.onChange, 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: this.onInput, placeholder: this.placeholder, value: this._getValue() || "", legacy: true })));
  }
  getInstructionsField() {
    return (h("ion-item", null, h("ion-textarea", { readonly: true, value: this.label })));
  }
  getInputField() {
    return (h("ion-item", null, h("ion-label", { "text-wrap": true, position: "floating" }, this.label), h("ion-input", { onIonInput: this.onInput, type: "text", placeholder: this.placeholder, 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 if (this.widget == "instructions") {
      return this.getInstructionsField();
    }
    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": "The feature property that corresponds to the form field."
        },
        "attribute": "attribute",
        "reflect": false
      },
      "image": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Image URL for the field item."
        },
        "attribute": "image",
        "reflect": false
      },
      "label": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Label text for the field item."
        },
        "attribute": "label",
        "reflect": false
      },
      "placeholder": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "A placeholder prompt text to display to the user, valid only for textarea and input fields."
        },
        "attribute": "placeholder",
        "reflect": false
      },
      "required": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "The field must be filled out before the form can be submitted."
        },
        "attribute": "required",
        "reflect": false,
        "defaultValue": "false"
      },
      "type": {
        "type": "any",
        "mutable": false,
        "complexType": {
          "original": "any",
          "resolved": "any",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Field type. It is not currently used."
        },
        "attribute": "type",
        "reflect": false
      },
      "widget": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "| \"input\"\n    | \"radio\"\n    | \"select\"\n    | \"textarea\"\n    | \"instructions\"",
          "resolved": "\"input\" | \"instructions\" | \"radio\" | \"select\" | \"textarea\"",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Widget used to render the field."
        },
        "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": "Emitted when the field value is changed by the user."
        },
        "complexType": {
          "original": "any",
          "resolved": "any",
          "references": {}
        }
      }];
  }
  static get methods() {
    return {
      "isValid": {
        "complexType": {
          "signature": "() => Promise<boolean>",
          "parameters": [],
          "references": {
            "Promise": {
              "location": "global",
              "id": "global::Promise"
            }
          },
          "return": "Promise<boolean>"
        },
        "docs": {
          "text": "Returns whether this field is valid",
          "tags": [{
              "name": "returns",
              "text": undefined
            }]
        }
      },
      "getValue": {
        "complexType": {
          "signature": "() => Promise<any>",
          "parameters": [],
          "references": {
            "Promise": {
              "location": "global",
              "id": "global::Promise"
            }
          },
          "return": "Promise<any>"
        },
        "docs": {
          "text": "Returns the value of the attribute of the feature this form is editing",
          "tags": [{
              "name": "returns",
              "text": "value of the attribute of the feature"
            }]
        }
      },
      "validate": {
        "complexType": {
          "signature": "() => Promise<string>",
          "parameters": [],
          "references": {
            "Promise": {
              "location": "global",
              "id": "global::Promise"
            }
          },
          "return": "Promise<string>"
        },
        "docs": {
          "text": "Checks whether the value is required and also present\nIf it is not returns an error text, if it is valid returns null",
          "tags": [{
              "name": "returns",
              "text": undefined
            }]
        }
      }
    };
  }
  static get elementRef() { return "el"; }
  static get listeners() {
    return [{
        "name": "glOptionChanged",
        "method": "optionChanged",
        "target": undefined,
        "capture": false,
        "passive": false
      }];
  }
}
//# sourceMappingURL=field.js.map
