import { Component, Element, Event, h, Prop, State } from "@stencil/core";
import * as translation from "./translation";
export class IntergiroEmailAddress {
  constructor() {
    this.editable = true;
    this.type = "primary";
    this.mode = "display";
  }
  componentWillLoad() {
    this.t = translation.create(this.element);
  }
  onEdit(event) {
    event.stopPropagation();
    this.value = event.detail;
    this.mode = "display";
    this.edit.emit({ type: this.type, value: this.value });
  }
  onDelete() {
    this.delete.emit(this.type);
  }
  render() {
    const t = this.t;
    return this.value.length > 0
      ? [
        this.mode == "display" ? ([
          this.editable && (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: t("Delete"), onClick: () => this.onDelete() })))),
          h("label", null, t(this.type)),
          h("smoothly-display", { type: "email", value: this.value }),
        ]) : (h("ig-email-input", { value: this.value, type: this.type, mode: "edit", onEdit: (e) => this.onEdit(e) })),
      ]
      : [];
  }
  static get is() { return "ig-email-address"; }
  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": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "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"
    },
    "type": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "EmailAddresses.Type",
        "resolved": "\"billing\" | \"primary\"",
        "references": {
          "EmailAddresses": {
            "location": "import",
            "path": "@payfunc/model"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "type",
      "reflect": false,
      "defaultValue": "\"primary\""
    },
    "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: string; value: string }",
        "resolved": "{ type: string; value: string; }",
        "references": {}
      }
    }, {
      "method": "delete",
      "name": "delete",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "EmailAddresses.Type",
        "resolved": "\"billing\" | \"primary\"",
        "references": {
          "EmailAddresses": {
            "location": "import",
            "path": "@payfunc/model"
          }
        }
      }
    }]; }
  static get elementRef() { return "element"; }
}
