import { Component, Element, Event, h, Listen, Prop, State, Watch } from "@stencil/core";
import * as gracely from "gracely";
import * as selectively from "selectively";
import { Notice } from "smoothly";
import { sort } from "@payfunc/model";
import { PayfuncPortal } from "../index";
import * as translation from "./translation";
export class PortalDisplayDeferList {
  componentWillLoad() {
    this.t = translation.create(this.element);
  }
  filterUpdated() {
    this.ordersFiltered = this.filterAndSort(this.orders);
  }
  filterAndSort(orders) {
    const result = this.filter && orders ? selectively.filter(this.filter, orders) : orders;
    return result && sort(result, "created");
  }
  async handleCancel(event) {
    event.stopPropagation();
    const body = [{ id: event.detail.order.id, event: [{ type: "cancel" }] }];
    this.notice.emit(Notice.execute(this.t("Canceling deferred payment..."), async () => {
      var _a, _b;
      let result;
      const response = await ((_a = PayfuncPortal.client) === null || _a === void 0 ? void 0 : _a.order.update(body));
      if (gracely.Error.is(response))
        result = [false, this.t("Failed to cancel deferred payment.")];
      else {
        result = [true, this.t("Deferred payment was canceled.")];
        const orders = await ((_b = PayfuncPortal.client) === null || _b === void 0 ? void 0 : _b.order.list());
        this.updateOrder.emit(orders);
      }
      return result;
    }));
  }
  render() {
    const t = this.t;
    let result;
    if (!this.ordersFiltered)
      result = h("p", null, t("Unable to load deferred payments from server."));
    else if (this.ordersFiltered.length <= 0)
      result = h("p", null, t("There are no deferred payments to display."));
    else {
      result = [
        h("table", null,
          h("thead", null,
            h("tr", { color: "light" },
              h("th", { style: { width: "5%" }, color: "light" }),
              h("th", { color: "light" }, t("Order number")),
              h("th", { color: "light" }, t("Contact")),
              h("th", { color: "light" }, t("Amount")),
              h("th", { color: "light" }),
              h("th", { color: "light" }, t("Created")),
              h("th", { color: "light" }))),
          this.ordersFiltered.map(order => (h("portal-display-defer", { order: order }))),
          h("th", { colSpan: 7 })),
      ];
    }
    return result;
  }
  static get is() { return "portal-display-defer-list"; }
  static get encapsulation() { return "scoped"; }
  static get originalStyleUrls() { return {
    "$": ["style.css"]
  }; }
  static get styleUrls() { return {
    "$": ["style.css"]
  }; }
  static get properties() { return {
    "orders": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "Order[]",
        "resolved": "Order[]",
        "references": {
          "Order": {
            "location": "import",
            "path": "@payfunc/model"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "filter": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "Criteria",
        "resolved": "Helper[] | Rule | number | string | { [property: string]: Helper | Helper[]; }",
        "references": {
          "Criteria": {
            "location": "import",
            "path": "selectively"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "filter",
      "reflect": false
    }
  }; }
  static get states() { return {
    "t": {},
    "ordersFiltered": {}
  }; }
  static get events() { return [{
      "method": "notice",
      "name": "notice",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "Notice",
        "resolved": "Notice",
        "references": {
          "Notice": {
            "location": "import",
            "path": "smoothly"
          }
        }
      }
    }, {
      "method": "updateOrder",
      "name": "updateOrder",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }]; }
  static get elementRef() { return "element"; }
  static get watchers() { return [{
      "propName": "filter",
      "methodName": "filterUpdated"
    }, {
      "propName": "orders",
      "methodName": "filterUpdated"
    }]; }
  static get listeners() { return [{
      "name": "paymentCancel",
      "method": "handleCancel",
      "target": undefined,
      "capture": false,
      "passive": false
    }]; }
}
