import { Component, Element, Event, h, Listen, Prop, State } from "@stencil/core";
import { Notice } from "smoothly";
import * as translation from "./translation";
export class IntergiroPhoneNumberInput {
  constructor() {
    this.types = [];
    this.type = this.types[0];
    this.mode = "edit";
  }
  componentWillLoad() {
    this.t = translation.create(this.element);
  }
  onSubmit(e) {
    const value = e.detail.phone;
    if (value) {
      if (this.mode == "add")
        this.add.emit({ type: this.type, value });
      else
        this.edit.emit(value);
    }
    else
      this.notice.emit(Notice.failed(this.t("Please enter a valid phone number.")));
  }
  onCancel() {
    this.edit.emit(this.value);
  }
  onSelectionChanged(e) {
    this.type = e.detail.value;
  }
  toUpperCase(value) {
    return value.charAt(0).toUpperCase() + value.slice(1);
  }
  render() {
    const t = this.t;
    return (h("form", null,
      this.mode == "add" ? (h("smoothly-select", { background: "transparent" }, this.types.map(option => this.type == option ? (h("option", { value: option, selected: true }, this.toUpperCase(t(option)))) : (h("option", { value: option }, this.toUpperCase(t(option))))))) : ([]),
      h("smoothly-input", { type: "phone", name: "phone", value: this.value }, this.mode == "add" ? t("Phone number") : t(this.type)),
      h("div", null,
        h("smoothly-submit", { prevent: true, onSubmit: (e) => this.onSubmit(e) },
          h("smoothly-icon", { name: "checkmark-circle", toolTip: t("Save"), color: "success", fill: "clear", size: "small" })),
        h("smoothly-submit", { prevent: true, onSubmit: () => this.onCancel() },
          h("smoothly-icon", { name: "close-circle", toolTip: t("Cancel"), color: "light", fill: "clear", size: "small" })))));
  }
  static get is() { return "ig-phone-number-input"; }
  static get encapsulation() { return "scoped"; }
  static get originalStyleUrls() { return {
    "$": ["style.css"]
  }; }
  static get styleUrls() { return {
    "$": ["style.css"]
  }; }
  static get properties() { return {
    "value": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "value",
      "reflect": false
    },
    "types": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "PhoneNumbers.Type[]",
        "resolved": "Type[]",
        "references": {
          "PhoneNumbers": {
            "location": "import",
            "path": "@payfunc/model"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "defaultValue": "[]"
    },
    "mode": {
      "type": "string",
      "mutable": true,
      "complexType": {
        "original": "\"edit\" | \"add\"",
        "resolved": "\"add\" | \"edit\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "mode",
      "reflect": false,
      "defaultValue": "\"edit\""
    }
  }; }
  static get states() { return {
    "type": {},
    "t": {}
  }; }
  static get events() { return [{
      "method": "add",
      "name": "add",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "{ type: string; value: string }",
        "resolved": "{ type: string; value: string; }",
        "references": {}
      }
    }, {
      "method": "edit",
      "name": "edit",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      }
    }, {
      "method": "notice",
      "name": "notice",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "Notice",
        "resolved": "Notice",
        "references": {
          "Notice": {
            "location": "import",
            "path": "smoothly"
          }
        }
      }
    }]; }
  static get elementRef() { return "element"; }
  static get listeners() { return [{
      "name": "selectionChanged",
      "method": "onSelectionChanged",
      "target": undefined,
      "capture": false,
      "passive": false
    }]; }
}
