import { Component, Element, h, Prop, State } from "@stencil/core";
import { itemToAmount } from "../../../../model";
import * as translation from "./translation";
export class IntergiroAuthorizationHistory {
  constructor() {
    this.opened = {};
  }
  componentWillLoad() {
    this.t = translation.create(this.element);
  }
  toggleColumn(index, column) {
    const opened = this.opened;
    opened[index] == column ? delete opened[index] : (opened[index] = column);
    this.opened = Object.assign({}, opened);
  }
  getVerification(value) {
    return value ? this.t(value == "verified" ? value : "verification " + value) : undefined;
  }
  getDescription(attempt) {
    let result = "";
    switch (attempt.type) {
      case "create":
        const amount = attempt.status == "success"
          ? this.state.authorization.amount + " " + this.state.authorization.currency
          : attempt.status == "fail" && attempt.amount && attempt.currency
            ? attempt.amount + " " + attempt.currency
            : undefined;
        result += amount !== null && amount !== void 0 ? amount : "";
        result += "reason" in attempt ? " " + this.t(attempt.reason) : "";
        result += "verification" in attempt ? ", " + this.getVerification(attempt.verification) : "";
        break;
      case "capture":
      case "refund":
        result += attempt.amount + " " + attempt.currency + ("reason" in attempt ? ", " + this.t(attempt.reason) : "");
        break;
      case "void":
        result += "reason" in attempt ? this.t(attempt.reason) : "";
        break;
      case "verification":
        result +=
          itemToAmount(attempt.items) +
            " " +
            attempt.currency +
            ("reason" in attempt ? ", " + this.t(attempt.reason) : "");
        break;
      default:
        break;
    }
    return result;
  }
  render() {
    const history = this.state.authorization.history;
    return (history.length > 0 && (h("table", null,
      h("th", { color: "light" }, this.t("type")),
      h("th", { color: "light" }, this.t("description")),
      h("th", { color: "light" }, this.t("date")),
      history.map((attempt, index) => {
        return [
          h("tr", null,
            h("td", null,
              h("section", { class: "openable" + (this.opened[index] ? " opened" : ""), onClick: () => this.toggleColumn(index, "type") },
                h("smoothly-icon", { toolTip: this.t(attempt.status), size: "small", name: attempt.status == "success"
                    ? "checkmark-circle"
                    : attempt.status == "fail"
                      ? "warning"
                      : "hourglass", color: attempt.status == "success" ? "success" : attempt.status == "fail" ? "danger" : "warning", fill: "clear" }),
                h("smoothly-display", null, this.t(attempt.type)))),
            h("td", null,
              h("smoothly-display", null, this.getDescription(attempt))),
            h("td", null,
              h("smoothly-display-date-time", { datetime: attempt.date }))),
          h("ig-history-details", { history: attempt, opened: !!this.opened[index] }),
        ];
      }))));
  }
  static get is() { return "ig-authorization-history"; }
  static get encapsulation() { return "scoped"; }
  static get originalStyleUrls() { return {
    "$": ["style.css"]
  }; }
  static get styleUrls() { return {
    "$": ["style.css"]
  }; }
  static get properties() { return {
    "state": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "ModelState.Authorization | ModelState.FailedAuthorization",
        "resolved": "Authorization | FailedAuthorization",
        "references": {
          "ModelState": {
            "location": "import",
            "path": "../../../../model"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    }
  }; }
  static get states() { return {
    "t": {},
    "opened": {}
  }; }
  static get elementRef() { return "element"; }
}
