import { Component, Element, Event, h, Prop, State } from "@stencil/core";
import { PhoneNumbers } from "@payfunc/model";
import * as translation from "./translation";
export class PayfuncPhoneNumbers {
  constructor() {
    this.editable = true;
    this.adding = false;
  }
  componentWillLoad() {
    this.t = translation.create(this.element);
  }
  get types() {
    return PhoneNumbers.types.filter(type => PhoneNumbers.is(this.value) ? !this.value[type] : this.value ? type != "primary" : type);
  }
  get phoneNumbers() {
    return PhoneNumbers.is(this.value) ? Object.assign({}, this.value) : { primary: this.value };
  }
  onEdit(e) {
    const type = e.detail.type;
    delete e.detail.type;
    let result;
    if (!PhoneNumbers.is(this.value))
      result = e.detail.value;
    else {
      result = Object.assign({}, this.value);
      result[type] = e.detail.value;
    }
    this.changed.emit((this.value = result));
  }
  onDelete(e) {
    const type = e.detail;
    const result = Object.assign({}, this.phoneNumbers);
    delete result[type];
    this.changed.emit((this.value = result));
  }
  onAdd(e) {
    const type = e.detail.type;
    const value = e.detail.value;
    const result = this.phoneNumbers;
    result[type] = value;
    this.changed.emit((this.value = result));
    this.adding = false;
  }
  render() {
    return [
      this.adding ? (h("payfunc-phone-number-input", { onEdit: (e) => (this.adding = false), types: this.types, mode: "add", onAdd: (e) => this.onAdd(e) })) : ([]),
      this.editable && this.types.length > 0 ? (h("smoothly-icon", { name: "add-circle", toolTip: this.t("Add"), fill: "clear", size: "medium", color: "success", style: this.adding ? { display: "none" } : {}, onClick: () => (this.adding = true) })) : ([]),
      this.phoneNumbers ? (PhoneNumbers.is(this.value) ? (PhoneNumbers.map(this.value, (type, value) => [
        h("payfunc-phone-number", { value: value, type: type, editable: this.editable, onEdit: (e) => this.onEdit(e), onDelete: (e) => this.onDelete(e) }),
      ])) : (h("payfunc-phone-number", { value: this.value, editable: this.editable, onEdit: (e) => this.onEdit(e), onDelete: (e) => this.onDelete(e) }))) : ([]),
    ];
  }
  static get is() { return "payfunc-phone-numbers"; }
  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": true,
      "complexType": {
        "original": "string | PhoneNumbers",
        "resolved": "PhoneNumbers | string",
        "references": {
          "PhoneNumbers": {
            "location": "import",
            "path": "@payfunc/model"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "value",
      "reflect": false
    },
    "editable": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "editable",
      "reflect": false,
      "defaultValue": "true"
    }
  }; }
  static get states() { return {
    "adding": {},
    "t": {}
  }; }
  static get events() { return [{
      "method": "changed",
      "name": "changed",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "string | PhoneNumbers",
        "resolved": "PhoneNumbers | string",
        "references": {
          "PhoneNumbers": {
            "location": "import",
            "path": "@payfunc/model"
          }
        }
      }
    }]; }
  static get elementRef() { return "element"; }
}
