import { Component, Element, Event, h, Prop, State } from "@stencil/core";
import { Currency } from "isoly";
import * as translation from "./translation";
export class IntergiroStatusChange {
  get mode() {
    return this.amount && Currency.is(this.currency) ? "amount" : "quantity";
  }
  componentWillLoad() {
    this.t = translation.create(this.element);
  }
  emitChangeStatus(type) {
    var _a, _b, _c;
    const value = !((_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.value)
      ? 1
      : this.mode == "quantity"
        ? Number.parseInt((_b = this.inputElement) === null || _b === void 0 ? void 0 : _b.value)
        : Number.parseFloat((_c = this.inputElement) === null || _c === void 0 ? void 0 : _c.value);
    this.changeStatus.emit({ type, items: this.mode == "quantity" ? { quantity: value } : value });
    if (this.popupElement)
      this.popupElement.visible = false;
  }
  render() {
    var _a;
    const t = this.t;
    let events;
    switch (this.status) {
      case "created":
      case "deferred":
      case "pending":
        events = [];
        break;
      case "ordered":
        events = [];
        break;
      case "charged":
      case "paid":
        events = ["refund"];
        break;
      default:
      case "denied":
      case "cancelled":
      case "refunded":
      case "synchronized":
        events = [];
        break;
    }
    return [
      events.length != 0 ? (h("smoothly-popup", { ref: (e) => (this.popupElement = e) },
        h("main", null,
          h("ig-status", { quantity: this.quantity, unit: this.unit, status: this.status })),
        h("content", { slot: "popup" },
          this.quantity == 1 ? ("") : this.mode == "quantity" ? (h("smoothly-select", { color: "dark", identifier: "quantity", ref: (e) => (this.inputElement = e) }, generateOptions((_a = this.quantity) !== null && _a !== void 0 ? _a : 1).map(c => (c = this.quantity ? (h("option", { value: c }, c)) : (h("option", { value: c, selected: true }, c)))))) : (h("smoothly-input", { type: "price", name: "amount", id: "amount", value: this.amount, ref: (e) => (this.inputElement = e) },
            t("Amount"),
            " (",
            this.currency,
            ")")),
          events.map(event => (h("button", { onClick: () => this.emitChangeStatus(event), id: event, name: event },
            h("smoothly-icon", { toolTip: t(event), name: event == "cancel"
                ? "close"
                : event == "charge"
                  ? "checkmark"
                  : event == "refund"
                    ? "arrow-undo"
                    : "", color: event == "cancel"
                ? "danger"
                : event == "charge"
                  ? "success"
                  : event == "refund"
                    ? "danger"
                    : "medium" }))))))) : (h("div", null,
        h("span", null,
          h("ig-status", { quantity: this.quantity, unit: this.unit, status: this.status })))),
    ];
  }
  static get is() { return "ig-status-change"; }
  static get encapsulation() { return "scoped"; }
  static get originalStyleUrls() { return {
    "$": ["style.css"]
  }; }
  static get styleUrls() { return {
    "$": ["style.css"]
  }; }
  static get properties() { return {
    "status": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "Status",
        "resolved": "\"cancelled\" | \"charged\" | \"created\" | \"deferred\" | \"denied\" | \"ordered\" | \"paid\" | \"pending\" | \"refunded\" | \"settled\" | \"synchronized\"",
        "references": {
          "Status": {
            "location": "import",
            "path": "@payfunc/model"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "status",
      "reflect": true
    },
    "quantity": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number | undefined",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "quantity",
      "reflect": true
    },
    "unit": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string | undefined",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "unit",
      "reflect": true
    },
    "amount": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number | undefined",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "amount",
      "reflect": true
    },
    "currency": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "Currency",
        "resolved": "Currency | undefined",
        "references": {
          "Currency": {
            "location": "import",
            "path": "isoly"
          }
        }
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "currency",
      "reflect": true
    }
  }; }
  static get states() { return {
    "t": {}
  }; }
  static get events() { return [{
      "method": "changeStatus",
      "name": "changeStatus",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "{ type: modelEvent.Type; items: number | { quantity: number } }",
        "resolved": "{ type: Type; items: number | { quantity: number; }; }",
        "references": {
          "modelEvent": {
            "location": "import",
            "path": "../model"
          }
        }
      }
    }]; }
  static get elementRef() { return "element"; }
}
function generateOptions(count) {
  const result = [];
  for (let c = 1; c <= count; c++)
    result.push(c);
  return result;
}
