import { Component, Element, Event, h, Listen, Prop, State } from "@stencil/core";
import * as translation from "./translation";
export class PayfuncDisplayEdit {
  constructor() {
    this.type = "text";
    this.deletable = true;
    this.adding = false;
    this.mode = "display";
  }
  componentWillLoad() {
    if (this.select && this.value)
      this.selected = this.value;
    this.t = translation.create(this.element);
  }
  onSubmit(e) {
    var _a;
    this.mode = "display";
    this.changed.emit((this.value = this.select ? (_a = this.selected) !== null && _a !== void 0 ? _a : this.select[this.select.length - 1] : e.detail.value));
  }
  onDelete() {
    this.changed.emit((this.value = undefined));
    this.reset();
  }
  reset() {
    this.mode = "display";
    this.adding = false;
  }
  onSelectionChanged(e) {
    this.selected = e.detail.value;
  }
  render() {
    return (h("form", null,
      this.mode == "display" && this.value
        ? [
          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: this.t("Edit"), onClick: () => (this.mode = "input") }),
              this.deletable ? (h("smoothly-icon", { size: "small", name: "trash", toolTip: this.t("Delete"), onClick: () => this.onDelete() })) : ([]))),
        ]
        : [],
      !this.value || this.value == "" ? (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.mode = "input")) })) : ([]),
      this.mode == "display" ? (h("smoothly-display", { type: this.type, value: this.value })) : ([
        this.select ? (h("smoothly-select", { background: "transparent" }, this.select.map(option => this.selected && this.selected == option ? (h("option", { value: option, selected: true }, option.charAt(0).toUpperCase() + option.slice(1))) : (h("option", { value: option }, option.charAt(0).toUpperCase() + option.slice(1)))))) : (h("smoothly-input", { type: this.type, value: this.value, name: "value" }, this.name)),
        h("div", null,
          h("smoothly-submit", { prevent: true, onSubmit: (e) => this.onSubmit(e) },
            h("smoothly-icon", { name: "checkmark-circle", toolTip: this.t("Save"), color: "success", fill: "clear", size: "small" })),
          h("smoothly-submit", { prevent: true, onSubmit: () => this.reset() },
            h("smoothly-icon", { name: "close-circle", toolTip: this.t("Cancel"), color: "light", fill: "clear", size: "small" }))),
      ])));
  }
  static get is() { return "payfunc-display-edit"; }
  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": "Type",
        "resolved": "\"card-csc\" | \"card-expires\" | \"card-number\" | \"date\" | \"date-time\" | \"divisor\" | \"email\" | \"identity-number\" | \"password\" | \"percent\" | \"phone\" | \"postal-code\" | \"price\" | \"text\"",
        "references": {
          "Type": {
            "location": "import",
            "path": "tidily"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "type",
      "reflect": false,
      "defaultValue": "\"text\""
    },
    "value": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "value",
      "reflect": false
    },
    "name": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "name",
      "reflect": true
    },
    "select": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "any[]",
        "resolved": "any[]",
        "references": {}
      },
      "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,
      "defaultValue": "true"
    },
    "mode": {
      "type": "string",
      "mutable": true,
      "complexType": {
        "original": "\"display\" | \"input\"",
        "resolved": "\"display\" | \"input\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "mode",
      "reflect": false,
      "defaultValue": "\"display\""
    }
  }; }
  static get states() { return {
    "adding": {},
    "selected": {},
    "t": {}
  }; }
  static get events() { return [{
      "method": "changed",
      "name": "changed",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      }
    }]; }
  static get elementRef() { return "element"; }
  static get listeners() { return [{
      "name": "selectionChanged",
      "method": "onSelectionChanged",
      "target": undefined,
      "capture": false,
      "passive": false
    }]; }
}
