import { Component, Element, Event, h, Prop, State } from "@stencil/core";
import { Item } from "@payfunc/model";
import * as translation from "./translation";
export class Payfuncitem {
  constructor() {
    this.mode = "display";
    this.editable = false;
  }
  componentWillLoad() {
    this.t = translation.create(this.element);
  }
  update(e) {
    if (Item.is(this.item)) {
      const updated = {
        quantity: Number(e.detail.quantity),
        unit: e.detail.unit,
        name: e.detail.name,
        price: Number(e.detail.price.slice(0, -4)),
        vat: Number(e.detail.vat),
      };
      this.item = Object.assign(Object.assign({}, this.item), updated);
    }
    else
      this.item = e.detail.price;
    this.edit.emit(this.item);
    this.mode = "display";
  }
  render() {
    var _a;
    return (h("form", null,
      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: this.t("Edit"), onClick: () => (this.mode = "edit") })))) : this.mode == "edit" ? ([
        h("smoothly-icon", { name: "close-circle", toolTip: this.t("Cancel"), fill: "clear", size: "small", color: "medium", onClick: () => (this.mode = "display") }),
        h("smoothly-submit", { prevent: true, onSubmit: (e) => this.update(e) },
          h("smoothly-icon", { name: "checkmark-circle", toolTip: this.t("Save"), fill: "clear", size: "small", color: "success" })),
      ]) : ([]),
      h("ol", null,
        h("li", null, Item.is(this.item) ? (this.mode == "display" ? ([
          h("span", null,
            this.item.quantity,
            " ",
            this.item.unit,
            " ",
            this.t((_a = this.item.name) !== null && _a !== void 0 ? _a : "")),
          h("smoothly-display", { type: "price", value: Item.amount(this.item), currency: this.currency }),
        ]) : ([
          h("smoothly-input", { type: "price", name: "quantity", value: this.item.quantity }, this.t("Quantity")),
          h("smoothly-input", { type: "text", name: "unit", value: this.item.unit }, this.t("Unit")),
          h("smoothly-input", { type: "text", name: "name", value: this.item.name }, this.t("Name")),
          h("smoothly-input", { type: "price", name: "vat", value: this.item.vat }, this.t("VAT")),
          h("smoothly-input", { type: "price", name: "price", value: this.item.price, currency: this.currency }, this.t("Price")),
        ])) : this.mode == "display" ? (h("smoothly-display", { type: "price", value: Item.amount(this.item), currency: this.currency })) : (h("smoothly-input", { type: "price", name: "price", value: this.item, currency: this.currency }, this.t("Price")))))));
  }
  static get is() { return "payfunc-item"; }
  static get encapsulation() { return "scoped"; }
  static get originalStyleUrls() { return {
    "$": ["style.css"]
  }; }
  static get styleUrls() { return {
    "$": ["style.css"]
  }; }
  static get properties() { return {
    "item": {
      "type": "number",
      "mutable": true,
      "complexType": {
        "original": "number | Item",
        "resolved": "Item | number",
        "references": {
          "Item": {
            "location": "import",
            "path": "@payfunc/model"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "item",
      "reflect": false
    },
    "currency": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "Currency",
        "resolved": "\"AED\" | \"AFN\" | \"ALL\" | \"AMD\" | \"ANG\" | \"AOA\" | \"ARS\" | \"AUD\" | \"AWG\" | \"AZN\" | \"BAM\" | \"BBD\" | \"BDT\" | \"BGN\" | \"BHD\" | \"BIF\" | \"BMD\" | \"BND\" | \"BOB\" | \"BOV\" | \"BRL\" | \"BSD\" | \"BTN\" | \"BWP\" | \"BYN\" | \"BZD\" | \"CAD\" | \"CDF\" | \"CHE\" | \"CHF\" | \"CHW\" | \"CLF\" | \"CLP\" | \"CNY\" | \"COP\" | \"COU\" | \"CRC\" | \"CUC\" | \"CUP\" | \"CVE\" | \"CZK\" | \"DJF\" | \"DKK\" | \"DOP\" | \"DZD\" | \"EGP\" | \"ERN\" | \"ETB\" | \"EUR\" | \"FJD\" | \"FKP\" | \"GBP\" | \"GEL\" | \"GHS\" | \"GIP\" | \"GMD\" | \"GNF\" | \"GTQ\" | \"GYD\" | \"HKD\" | \"HNL\" | \"HRK\" | \"HTG\" | \"HUF\" | \"IDR\" | \"ILS\" | \"INR\" | \"IQD\" | \"IRR\" | \"ISK\" | \"JMD\" | \"JOD\" | \"JPY\" | \"KES\" | \"KGS\" | \"KHR\" | \"KMF\" | \"KPW\" | \"KRW\" | \"KWD\" | \"KYD\" | \"KZT\" | \"LAK\" | \"LBP\" | \"LKR\" | \"LRD\" | \"LSL\" | \"LYD\" | \"MAD\" | \"MDL\" | \"MGA\" | \"MKD\" | \"MMK\" | \"MNT\" | \"MOP\" | \"MRU\" | \"MUR\" | \"MVR\" | \"MWK\" | \"MXN\" | \"MXV\" | \"MYR\" | \"MZN\" | \"NAD\" | \"NGN\" | \"NIO\" | \"NOK\" | \"NPR\" | \"NZD\" | \"OMR\" | \"PAB\" | \"PEN\" | \"PGK\" | \"PHP\" | \"PKR\" | \"PLN\" | \"PYG\" | \"QAR\" | \"RON\" | \"RSD\" | \"RUB\" | \"RWF\" | \"SAR\" | \"SBD\" | \"SCR\" | \"SDG\" | \"SEK\" | \"SGD\" | \"SHP\" | \"SLL\" | \"SOS\" | \"SRD\" | \"SSP\" | \"STN\" | \"SVC\" | \"SYP\" | \"SZL\" | \"THB\" | \"TJS\" | \"TMT\" | \"TND\" | \"TOP\" | \"TRY\" | \"TTD\" | \"TWD\" | \"TZS\" | \"UAH\" | \"UGX\" | \"USD\" | \"USN\" | \"UYI\" | \"UYU\" | \"UYW\" | \"UZS\" | \"VES\" | \"VND\" | \"VUV\" | \"WST\" | \"XAF\" | \"XAG\" | \"XAU\" | \"XBA\" | \"XBB\" | \"XBC\" | \"XBD\" | \"XCD\" | \"XDR\" | \"XOF\" | \"XPD\" | \"XPF\" | \"XPT\" | \"XSU\" | \"XTS\" | \"XUA\" | \"XXX\" | \"YER\" | \"ZAR\" | \"ZMW\" | \"ZWL\"",
        "references": {
          "Currency": {
            "location": "import",
            "path": "isoly"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "currency",
      "reflect": false
    },
    "mode": {
      "type": "string",
      "mutable": true,
      "complexType": {
        "original": "\"display\" | \"edit\"",
        "resolved": "\"display\" | \"edit\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "mode",
      "reflect": false,
      "defaultValue": "\"display\""
    },
    "editable": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "editable",
      "reflect": true,
      "defaultValue": "false"
    }
  }; }
  static get states() { return {
    "t": {}
  }; }
  static get events() { return [{
      "method": "edit",
      "name": "edit",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }]; }
  static get elementRef() { return "element"; }
}
