import { Component, Element, Event, h, Listen, Prop, State } from "@stencil/core";
import { Address, Addresses } from "@payfunc/model";
import * as translation from "./translation";
export class IntergiroAddresses {
  constructor() {
    this.allowed = [];
    this.editing = undefined;
    this.adding = false;
  }
  get allowedArray() {
    if (!this.allowedArrayValue)
      this.allowedArrayValue = Array.isArray(this.allowed)
        ? this.allowed
        : this.allowed.split(" ");
    return this.allowedArrayValue;
  }
  get address() {
    if (typeof this.value == "string")
      this.value = JSON.parse(this.value);
    return this.value;
  }
  get addresses() {
    return Address.is(this.address) ? { primary: this.address } : Object.assign({}, this.address);
  }
  get types() {
    return Addresses.types.filter(type => Addresses.is(this.value) ? !this.value[type] : Address.is(this.value) ? type != "primary" : type);
  }
  componentWillLoad() {
    this.t = translation.create(this.element);
  }
  onChange(e) {
    if (Address.is(e.detail)) {
      const type = e.detail.type;
      const address = Object.assign({}, e.detail);
      delete address.type;
      let result;
      if (type == "primary" && Address.is(this.address))
        result = address;
      else {
        result = Object.assign({}, this.addresses);
        result[type] = address;
      }
      this.changed.emit((this.value = result));
    }
  }
  onCreate(e) {
    const type = e.detail.type;
    const value = e.detail.value;
    const result = this.addresses;
    result[type] = value;
    this.changed.emit((this.value = result));
    this.adding = false;
  }
  onTrigger(e) {
    if (e.detail.name == "add" && typeof this.value != "string") {
      const result = this.addresses;
      const added = Address.create("SE");
      const type = e.detail.value;
      result[type] = added;
      this.value = result;
    }
  }
  onDelete(e) {
    const type = e.detail;
    const result = Object.assign({}, this.addresses);
    delete result[type];
    this.changed.emit((this.value = result));
  }
  render() {
    const allowed = this.allowedArray.filter(type => Addresses.is(this.address) ? this.address[type] == undefined : type != "primary");
    return [
      this.adding ? (h("ig-address-input", { onClose: () => (this.adding = false), mode: "add", types: this.types, onCreate: (e) => this.onCreate(e) })) : ([]),
      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.address ? (Address.is(this.address) ? (h("ig-address", { mode: this.editing ? "edit" : "display", value: this.address, onEdit: (e) => this.onChange(e), onDelete: (e) => this.onDelete(e) })) : (Addresses.map(this.address, (type, address) => (h("ig-address", { mode: this.editing ? "edit" : "display", type: type, value: address, onEdit: (e) => this.onChange(e), onDelete: (e) => this.onDelete(e) }))))) : ([]),
      allowed.map(type => (h("smoothly-trigger", { color: "primary", fill: "clear", name: "add", value: type },
        "+",
        type))),
    ];
  }
  static get is() { return "ig-addresses"; }
  static get encapsulation() { return "scoped"; }
  static get originalStyleUrls() { return {
    "$": ["style.css"]
  }; }
  static get styleUrls() { return {
    "$": ["style.css"]
  }; }
  static get properties() { return {
    "allowed": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "Addresses.Type[] | string",
        "resolved": "Type[] | string",
        "references": {
          "Addresses": {
            "location": "import",
            "path": "@payfunc/model"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "allowed",
      "reflect": false,
      "defaultValue": "[]"
    },
    "value": {
      "type": "string",
      "mutable": true,
      "complexType": {
        "original": "string | Address | Addresses",
        "resolved": "Addresses | DE | DK | FI | General | NO | SE | string",
        "references": {
          "Address": {
            "location": "import",
            "path": "@payfunc/model"
          },
          "Addresses": {
            "location": "import",
            "path": "@payfunc/model"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "value",
      "reflect": false
    }
  }; }
  static get states() { return {
    "t": {},
    "adding": {}
  }; }
  static get events() { return [{
      "method": "changed",
      "name": "changed",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "Address | Addresses",
        "resolved": "Addresses | DE | DK | FI | General | NO | SE",
        "references": {
          "Address": {
            "location": "import",
            "path": "@payfunc/model"
          },
          "Addresses": {
            "location": "import",
            "path": "@payfunc/model"
          }
        }
      }
    }]; }
  static get elementRef() { return "element"; }
  static get listeners() { return [{
      "name": "trigger",
      "method": "onTrigger",
      "target": undefined,
      "capture": false,
      "passive": false
    }]; }
}
