import { Component, Element, h, Prop, State } from "@stencil/core";
import { Account } from "@payfunc/model";
import * as translation from "./translation";
export class PayfuncAccountsFooter {
  componentWillLoad() {
    this.t = translation.create(this.element);
  }
  render() {
    var _a;
    const [active, created, pending, suspended] = this.accounts
      ? this.accounts.reduce(([a, c, p, s], account) => {
        var _a, _b;
        const status = (_a = account.status) !== null && _a !== void 0 ? _a : Account.Status.getStatus(account, this.orders ? (_b = this.orders[account.id]) === null || _b === void 0 ? void 0 : _b.slice(0, 1).shift() : undefined);
        return status == "active"
          ? [++a, c, p, s]
          : status == "created"
            ? [a, ++c, p, s]
            : status == "pending"
              ? [a, c, p++, s]
              : [a, c, p, ++s];
      }, [0, 0, 0, 0])
      : [0, 0, 0, 0];
    return (h("footer", null,
      h("td", null,
        h("span", null, this.t("total count: ")),
        h("span", null, this.accounts ? (_a = this.accounts) === null || _a === void 0 ? void 0 : _a.length : 0)),
      h("td", null,
        h("span", null, this.t("active: ")),
        h("span", null, active)),
      h("td", null,
        h("span", null, this.t("created: ")),
        h("span", null, created)),
      h("td", null,
        h("span", null, this.t("pending: ")),
        h("span", null, pending)),
      h("td", null,
        h("span", null, this.t("suspended: ")),
        h("span", null, suspended))));
  }
  static get is() { return "payfunc-accounts-footer"; }
  static get encapsulation() { return "scoped"; }
  static get originalStyleUrls() { return {
    "$": ["style.css"]
  }; }
  static get styleUrls() { return {
    "$": ["style.css"]
  }; }
  static get properties() { return {
    "accounts": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "Account[]",
        "resolved": "Account[]",
        "references": {
          "Account": {
            "location": "import",
            "path": "@payfunc/model"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "orders": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "{ [id: string]: Order[] | undefined }",
        "resolved": "undefined | { [id: string]: Order[] | undefined; }",
        "references": {
          "Order": {
            "location": "import",
            "path": "@payfunc/model"
          }
        }
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      }
    }
  }; }
  static get states() { return {
    "t": {}
  }; }
  static get elementRef() { return "element"; }
}
