import { Component, Element, h, Prop, State } from "@stencil/core";
import { DateTime } from "isoly";
import { Connection, Item, Order } from "@payfunc/model";
import * as translation from "./translation";
export class PayfuncOrdersFooter {
  constructor() {
    this.allSelected = false;
    this.opened = {};
  }
  componentWillLoad() {
    this.t = translation.create(this.element);
  }
  sumSelected() {
    const sum = {};
    for (const id of Object.keys(this.selected)) {
      const order = this.selected[id];
      if (order)
        if (Object.keys(sum).includes(order.currency))
          sum[order.currency] += Item.amount(order.items);
        else
          sum[order.currency] = Item.amount(order.items);
    }
    return sum;
  }
  sumAll() {
    const sum = {};
    if (this.orders)
      for (const order of this.orders)
        if (Object.keys(sum).includes(order.currency))
          sum[order.currency] += Item.amount(order.items);
        else
          sum[order.currency] = Item.amount(order.items);
    return sum;
  }
  downloadCsv() {
    const merchant = !Connection.user
      ? undefined
      : Array.isArray(Connection.user.merchant)
        ? Connection.user.merchant[0]
        : Connection.user.merchant;
    const filename = (merchant ? merchant.name + " " : "orders ") + DateTime.now().substring(0, 10) + ".csv";
    const orders = Object.keys(this.selected).length > 0
      ? Object.values(this.selected).filter(order => order != undefined)
      : this.orders;
    const text = orders ? Order.toCsv(orders) : "";
    const link = document.createElement("a");
    link.setAttribute("href", "data:text/csv;charset=utf-8," + encodeURIComponent(text));
    link.setAttribute("download", filename);
    link.style.display = "none";
    document.body.appendChild(link);
    link.click();
    link.remove();
  }
  render() {
    const t = this.t;
    let result;
    if (!this.orders)
      result = [];
    else {
      result = (h("footer", null,
        this.selected && Object.keys(this.selected).length > 0 ? (h("td", null,
          h("span", null,
            " ",
            t("Selected Count"),
            ":"),
          h("span", null, Object.keys(this.selected).length),
          h("span", { class: "tabbed" },
            t("Selected Amount"),
            ":"),
          Object.keys(this.sumSelected()).map(key => (h("smoothly-display-amount", { amount: this.sumSelected()[key], currency: key }))))) : (h("td", null,
          h("span", null,
            t("Total Count"),
            ":"),
          h("span", null, this.orders.length),
          h("span", { class: "tabbed" },
            t("Total Amount"),
            ":"),
          Object.keys(this.sumAll()).map(key => (h("smoothly-display-amount", { amount: this.sumAll()[key], currency: key }))))),
        h("button", { onClick: () => this.downloadCsv() },
          h("smoothly-icon", { color: "light", toolTip: t("Download order report"), name: "cloud-download" }))));
    }
    return result;
  }
  static get is() { return "payfunc-orders-footer"; }
  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": false,
      "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": ""
      }
    }
  }; }
  static get states() { return {
    "t": {},
    "allSelected": {},
    "opened": {}
  }; }
  static get elementRef() { return "element"; }
}
