import { Component, Element, Event, h, Listen, Prop, State, Watch } from "@stencil/core";
import { Address, Addresses, Contact, MerchantKeyUnpack, Name } from "../model";
import * as translation from "./translation";
export class IntergiroContact {
  constructor() {
    this.processing = false;
  }
  async componentWillLoad() {
    this.merchant = await MerchantKeyUnpack(this.apiKey, "public");
    this.t = translation.create(this.element);
  }
  componentDidLoad() {
    var _a;
    const form = document.getElementsByName("contact");
    const smoothlyInputs = form[0].getElementsByTagName("smoothly-input");
    if (this.contact) {
      for (let i = 0; i < smoothlyInputs.length; i++) {
        const element = smoothlyInputs.item(i);
        if (element)
          switch (element.name) {
            case "email":
              element.value = this.contact.email;
              break;
            case "phone":
              element.value = this.contact.phone;
              break;
            case "identityNumber":
              element.value = this.contact.identityNumber;
              break;
            case "zipCode":
              if (this.contact.address && Addresses.is(this.contact.address))
                element.value = (_a = Object.values(this.contact.address)[0]) === null || _a === void 0 ? void 0 : _a.zipCode;
              else if (this.contact.address && Address.is(this.contact.address))
                element.value = this.contact.address.zipCode;
              break;
            default:
              break;
          }
      }
    }
  }
  onContactChanged() {
    this.contactChanged.emit(this.contact);
  }
  async lookupUser(event) {
    this.processing = true;
    if (this.merchant) {
      const response = await fetch(this.merchant.iss +
        "/contact?countryCode=SE&identityNumber=" +
        event.detail.identityNumber +
        "&zipCode=" +
        event.detail.zipCode, {
        method: "GET",
        headers: {
          authorization: "Bearer " + this.apiKey,
          accept: "application/json",
          "content-type": "application/json",
        },
      });
      if (response.ok) {
        const personData = await response.json();
        if (Contact.is(personData)) {
          personData.email = event.detail.email;
          personData.phone = event.detail.phone;
          this.contact = personData;
        }
      }
    }
    this.processing = false;
  }
  render() {
    const t = this.t;
    return (h("form", { name: "contact" },
      h("header", null,
        h("h3", null, t("Address"))),
      Contact.is(this.contact) && (Address.is(this.contact.address) || Name.is(this.contact.name))
        ? [
          h("main", null,
            h("p", null, this.contact.name)),
          h("ig-display-address", { data: this.contact.address }),
        ]
        : [
          h("smoothly-input", { type: "email", name: "email" }, t("Email")),
          h("smoothly-input", { type: "phone", name: "phone" }, t("Phone")),
          h("smoothly-input", { type: "identity-number", name: "identityNumber" }, t("Identity Number")),
          h("smoothly-input", { type: "postal-code", name: "zipCode" }, t("Zip Code")),
          h("smoothly-submit", { color: "success", expand: "block", prevent: true, processing: this.processing, onSubmit: (e) => this.lookupUser(e) }, t("Continue")),
        ]));
  }
  static get is() { return "ig-contact"; }
  static get encapsulation() { return "scoped"; }
  static get originalStyleUrls() { return {
    "$": ["style.css"]
  }; }
  static get styleUrls() { return {
    "$": ["style.css"]
  }; }
  static get properties() { return {
    "apiKey": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "api-key",
      "reflect": false
    },
    "contact": {
      "type": "unknown",
      "mutable": true,
      "complexType": {
        "original": "Partial<Contact>",
        "resolved": "{ type?: \"organization\" | \"person\" | undefined; identityNumber?: string | undefined; id?: string | undefined; number?: string | undefined; name?: string | Name | undefined; address?: Address | Addresses | undefined; email?: string | EmailAddresses | undefined; phone?: string | PhoneNumbers | undefined; }",
        "references": {
          "Partial": {
            "location": "global"
          },
          "Contact": {
            "location": "import",
            "path": "../model"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    }
  }; }
  static get states() { return {
    "t": {},
    "processing": {},
    "merchant": {}
  }; }
  static get events() { return [{
      "method": "contactChanged",
      "name": "contactChanged",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }]; }
  static get elementRef() { return "element"; }
  static get watchers() { return [{
      "propName": "contact",
      "methodName": "onContactChanged"
    }]; }
  static get listeners() { return [{
      "name": "submit",
      "method": "lookupUser",
      "target": undefined,
      "capture": false,
      "passive": false
    }]; }
}
