import { Component, Element, Event, h, Listen, Prop, State } from "@stencil/core";
import "../orders-table-row";
import * as translation from "./translation";
export class IntergiroOrdersTable {
  constructor() {
    this.selected = {};
    this.display = false;
    this.opened = {};
    this.count = 100;
    this.hash = false;
  }
  componentWillLoad() {
    this.t = translation.create(this.element);
  }
  componentDidRender() {
    var _a;
    if (window.location.hash && !this.hash) {
      const element = document.getElementById(window.location.hash.substring(1));
      if (element) {
        element.scrollIntoView();
        const order = (_a = this.orders) === null || _a === void 0 ? void 0 : _a.find(order => { var _a; return ((_a = order.number) === null || _a === void 0 ? void 0 : _a.replace(/\s/g, "").toLowerCase()) == window.location.hash.substring(1); });
        if (order) {
          const opened = Object.assign({}, this.opened);
          opened[order.id] = "number";
          this.opened = opened;
        }
        this.hash = true;
      }
    }
  }
  toggleColumn(e) {
    const opened = Object.assign({}, this.opened);
    if (Object.prototype.hasOwnProperty.call(e.detail, "id") && opened[e.detail.id] == e.detail.column)
      delete opened[e.detail.id];
    else
      opened[e.detail.id] = e.detail.column;
    this.opened = opened;
  }
  handleToggle(event) {
    const orders = Object.assign({}, this.selected);
    if (event.detail.checked)
      orders[event.detail.order.id] = event.detail.order;
    else
      delete orders[event.detail.order.id];
    this.selectedChanged.emit((this.selected = orders));
  }
  onChecked(event) {
    this.selected = {};
    if (event.detail.selected && this.orders)
      for (const order of this.orders)
        this.selected[order.id] = order;
    this.selectedChanged.emit(this.selected);
    event.stopPropagation();
    event.preventDefault();
  }
  render() {
    const t = this.t;
    let result;
    if (!this.orders)
      result = h("p", null, t("Loading orders from server."));
    else if (this.orders.length <= 0)
      result = h("p", null, t("There are no orders to display."));
    else {
      const amountOrders = this.orders.length;
      result = (h("table", null,
        h("thead", null,
          h("tr", null,
            !this.display ? (h("th", { style: { width: "5%" }, color: "light" },
              h("smoothly-checkbox", { "select-all": true }))) : (""),
            h("th", { color: "light" }, t("Order number")),
            !this.display ? h("th", { color: "light" }, t("Contact")) : "",
            h("th", { color: "light" }, t("Amount")),
            this.receipt ? h("th", { color: "light" }, t("Receipt")) : "",
            h("th", { color: "light" }, t("Payment")),
            h("th", { color: "light" }, t("Created")),
            h("th", { color: "light" }, t("Status")))),
        this.orders
          .slice(0, this.count)
          .map(order => {
          var _a;
          return [
            h("ig-orders-table-row", { id: (_a = order.number) === null || _a === void 0 ? void 0 : _a.replace(/\s/g, "").toLowerCase(), selected: this.selected.hasOwnProperty.call(this.selected, order.id), order: order, display: this.display, opened: this.opened.hasOwnProperty.call(this.opened, order.id) ? this.opened[order.id] : "", receipt: this.receipt }),
            h("ig-orders-table-details", { order: order, opened: this.opened.hasOwnProperty.call(this.opened, order.id) ? this.opened[order.id] : "" }),
          ];
        }),
        h("td", { class: "loadMore", colSpan: 7 }, this.count < amountOrders ? (h("button", { onClick: () => (this.count += 100) },
          h("smoothly-icon", { name: "chevron-down-circle", size: "large", toolTip: t("Load more orders") }))) : ("")),
        h("td", null)));
    }
    return result;
  }
  static get is() { return "ig-orders-table"; }
  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[] | undefined",
        "references": {
          "Order": {
            "location": "import",
            "path": "@payfunc/model"
          }
        }
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "selected": {
      "type": "unknown",
      "mutable": true,
      "complexType": {
        "original": "{ [id: string]: Order | undefined }",
        "resolved": "{ [id: string]: Order | undefined; }",
        "references": {
          "Order": {
            "location": "import",
            "path": "@payfunc/model"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "defaultValue": "{}"
    },
    "display": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "display",
      "reflect": false,
      "defaultValue": "false"
    },
    "receipt": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean | undefined",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "receipt",
      "reflect": false
    },
    "embedded": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "\"app\" | string",
        "resolved": "string | undefined",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "embedded",
      "reflect": true
    }
  }; }
  static get states() { return {
    "t": {},
    "opened": {},
    "count": {}
  }; }
  static get events() { return [{
      "method": "selectedChanged",
      "name": "selectedChanged",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "{ [id: string]: Order | undefined }",
        "resolved": "{ [id: string]: Order | undefined; }",
        "references": {
          "Order": {
            "location": "import",
            "path": "@payfunc/model"
          }
        }
      }
    }]; }
  static get elementRef() { return "element"; }
  static get listeners() { return [{
      "name": "columnClicked",
      "method": "toggleColumn",
      "target": undefined,
      "capture": false,
      "passive": false
    }, {
      "name": "orderSelected",
      "method": "handleToggle",
      "target": undefined,
      "capture": false,
      "passive": false
    }, {
      "name": "checked",
      "method": "onChecked",
      "target": undefined,
      "capture": false,
      "passive": false
    }]; }
}
