import { Component, Element, Event, h, Prop, State } from "@stencil/core";
import * as translation from "./translation";
export class PayfuncAddress {
  constructor() {
    this.type = "primary";
    this.mode = "display";
  }
  componentWillLoad() {
    this.t = translation.create(this.element);
  }
  onChange(event) {
    event.stopPropagation();
    this.value = event.detail;
    this.mode = "display";
    this.edit.emit(Object.assign({ type: this.type }, this.value));
  }
  onDelete() {
    this.delete.emit(this.type);
  }
  render() {
    const t = this.t;
    return [
      h("smoothly-popup", null,
        h("smoothly-icon", { name: "ellipsis-vertical-outline", size: "small" }),
        h("div", { color: "light", slot: "popup" },
          h("smoothly-icon", { size: "small", name: "pencil-outline", toolTip: t("Edit"), onClick: () => (this.mode = "edit") }),
          h("smoothly-icon", { size: "small", name: "trash", toolTip: "Delete", onClick: () => this.onDelete() }))),
      this.mode == "edit"
        ? [
          h("label", null, t(this.type)),
          h("payfunc-address-input", { onEdit: (e) => this.onChange(e), value: this.value }),
        ]
        : [h("label", null, t(this.type)), h("payfunc-address-display", { value: this.value })],
    ];
  }
  static get is() { return "payfunc-address"; }
  static get encapsulation() { return "scoped"; }
  static get originalStyleUrls() { return {
    "$": ["style.css"]
  }; }
  static get styleUrls() { return {
    "$": ["style.css"]
  }; }
  static get properties() { return {
    "type": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "Addresses.Type",
        "resolved": "\"billing\" | \"delivery\" | \"primary\" | \"visit\"",
        "references": {
          "Addresses": {
            "location": "import",
            "path": "@payfunc/model"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "type",
      "reflect": false,
      "defaultValue": "\"primary\""
    },
    "value": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "Address",
        "resolved": "DE | DK | FI | General | NO | SE",
        "references": {
          "Address": {
            "location": "import",
            "path": "@payfunc/model"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "deletable": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "deletable",
      "reflect": false
    },
    "mode": {
      "type": "string",
      "mutable": true,
      "complexType": {
        "original": "\"edit\" | \"display\"",
        "resolved": "\"display\" | \"edit\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "mode",
      "reflect": false,
      "defaultValue": "\"display\""
    }
  }; }
  static get states() { return {
    "t": {}
  }; }
  static get events() { return [{
      "method": "edit",
      "name": "edit",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "{ type: Addresses.Type } & Address",
        "resolved": "{ type: Type; } & DE | { type: Type; } & DK | { type: Type; } & FI | { type: Type; } & General | { type: Type; } & NO | { type: Type; } & SE",
        "references": {
          "Addresses": {
            "location": "import",
            "path": "@payfunc/model"
          },
          "Address": {
            "location": "import",
            "path": "@payfunc/model"
          }
        }
      }
    }, {
      "method": "delete",
      "name": "delete",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "Addresses.Type",
        "resolved": "\"billing\" | \"delivery\" | \"primary\" | \"visit\"",
        "references": {
          "Addresses": {
            "location": "import",
            "path": "@payfunc/model"
          }
        }
      }
    }]; }
  static get elementRef() { return "element"; }
}
