import { Component, Element, Event, h, Prop, State } from "@stencil/core";
import { Customer, Name } from "@payfunc/model";
import * as translation from "./translation";
export class PayfuncAccountCustomer {
  constructor() {
    this.types = ["organization", "person"];
  }
  componentWillLoad() {
    this.t = translation.create(this.element);
  }
  async update(property, value) {
    var _a;
    if (!value || Object.keys(value).length == 0)
      (_a = this.account.customer) === null || _a === void 0 ? true : delete _a[property];
    else {
      const update = { [property]: value };
      if (Customer.is(update))
        this.account.customer = Object.assign(Object.assign({}, this.account.customer), update);
    }
    this.updateCustomer.emit(this.account.customer);
  }
  render() {
    var _a, _b;
    const customer = this.account.customer;
    return [
      h("section", null,
        h("label", null, this.t("Name")),
        h("payfunc-display-edit", { type: "text", name: this.t("Name"), value: (customer === null || customer === void 0 ? void 0 : customer.name) ? Name.get(customer.name) : undefined, onChanged: (e) => this.update("name", e.detail) })),
      h("section", null,
        h("label", null, this.t("Type")),
        h("payfunc-display-edit", { type: "text", name: this.t("Type"), value: customer === null || customer === void 0 ? void 0 : customer.type, select: this.types, onChanged: (e) => this.update("type", e.detail) })),
      h("section", null,
        h("label", null, this.t("Number")),
        h("smoothly-display", { type: "text", value: customer === null || customer === void 0 ? void 0 : customer.number })),
      h("section", null,
        h("label", null, this.t("Identity number")),
        h("payfunc-display-edit", { type: "identity-number", name: this.t("Identity number"), value: customer === null || customer === void 0 ? void 0 : customer.identityNumber, onChanged: (e) => this.update("identityNumber", e.detail) })),
      h("section", null,
        h("label", null, this.t("Email")),
        h("payfunc-email-addresses", { value: (_a = customer === null || customer === void 0 ? void 0 : customer.email) !== null && _a !== void 0 ? _a : "", onChanged: (e) => this.update("email", e.detail) })),
      h("section", null,
        h("label", null, this.t("Phone number")),
        h("payfunc-phone-numbers", { value: (_b = customer === null || customer === void 0 ? void 0 : customer.phone) !== null && _b !== void 0 ? _b : "", onChanged: (e) => this.update("phone", e.detail) })),
      h("section", null,
        h("label", null, this.t("Address")),
        h("payfunc-addresses", { value: customer === null || customer === void 0 ? void 0 : customer.address, onChanged: (e) => this.update("address", e.detail) })),
    ];
  }
  static get is() { return "payfunc-account-customer"; }
  static get encapsulation() { return "scoped"; }
  static get originalStyleUrls() { return {
    "$": ["style.css"]
  }; }
  static get styleUrls() { return {
    "$": ["style.css"]
  }; }
  static get properties() { return {
    "account": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "Account",
        "resolved": "Account",
        "references": {
          "Account": {
            "location": "import",
            "path": "@payfunc/model"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    }
  }; }
  static get states() { return {
    "t": {}
  }; }
  static get events() { return [{
      "method": "updateCustomer",
      "name": "updateCustomer",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }]; }
  static get elementRef() { return "element"; }
}
