import { r as registerInstance, j as createEvent, h, g as getElement } from './index-07845439.js';
import { d as dist } from './index-63517df5.js';
import './_commonjsHelpers-8fe71198.js';

const sv = {
  "Customer number": "Kundnummer",
  Contact: "Kontakt",
  Method: "Metod",
  Orders: "Ordrar",
  Subscription: "Prenumeration",
  Balance: "Saldo",
  "Select all customers": "Markera alla kunder",
  "Deselect all customers": "Avmarkera alla kunder",
  "Loading customers from server.": "Laddar kunder från servern.",
  "There are no customers to display.": "Det finns inga kunder att visa.",
  "Load more customers": "Ladda in fler kunder",
};

function create(language) {
  return dist.create({
    sv,
  }, language);
}

const styleCss = ".sc-ig-customers-table-h{display:block;width:100%;max-width:90em;margin:auto;border:1px solid rgb(var(--smoothly-medium-color))}[hidden].sc-ig-customers-table-h{display:none}.sc-ig-customers-table-h>p.sc-ig-customers-table{padding-left:.5em}.sc-ig-customers-table-h>table.sc-ig-customers-table{width:100%}.sc-ig-customers-table-h>table.sc-ig-customers-table>thead.sc-ig-customers-table>tr.sc-ig-customers-table{display:table-row;font-weight:bold;height:2em}.sc-ig-customers-table-h>table.sc-ig-customers-table>thead.sc-ig-customers-table>tr.sc-ig-customers-table>*.sc-ig-customers-table{display:table-cell;padding-right:.5em;padding-left:.3em;vertical-align:middle;position:-webkit-sticky;position:sticky;top:1.55cm;z-index:1;text-align:left}.sc-ig-customers-table-h>table.sc-ig-customers-table>thead.sc-ig-customers-table>tr.sc-ig-customers-table>*.sc-ig-customers-table>smoothly-icon.sc-ig-customers-table{vertical-align:-50%;margin-left:.1em}.sc-ig-customers-table-h>table.sc-ig-customers-table>td.sc-ig-customers-table{text-align:center}.sc-ig-customers-table-h>table.sc-ig-customers-table>td.sc-ig-customers-table>button.sc-ig-customers-table>smoothly-icon.sc-ig-customers-table{cursor:pointer}";

const IntergiroCustomersTable = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.selectedChanged = createEvent(this, "selectedChanged", 7);
    this.selected = {};
    this.count = 100;
    this.opened = {};
  }
  componentWillLoad() {
    this.t = create(this.element);
  }
  onChecked(event) {
    this.selected = {};
    if (event.detail.selected && this.customers)
      for (const customer of this.customers)
        this.selected[customer.id] = customer;
    this.selectedChanged.emit(this.selected);
    event.stopPropagation();
    event.preventDefault();
  }
  handleToggle(event) {
    const customers = Object.assign({}, this.selected);
    if (event.detail.checked)
      customers[event.detail.customer.id] = event.detail.customer;
    else
      delete customers[event.detail.customer.id];
    this.selectedChanged.emit((this.selected = customers));
  }
  toggleColumn(e) {
    const opened = Object.assign({}, this.opened);
    if (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;
  }
  render() {
    const t = this.t;
    let result;
    if (!this.customers)
      result = h("p", null, t("Loading customers from server."));
    else if (this.customers.length <= 0)
      result = h("p", null, t("There are no customers to display."));
    else {
      result = [
        h("table", null, h("thead", null, h("tr", null, h("th", { style: { width: "5%" }, color: "light" }, h("smoothly-checkbox", { "select-all": true })), h("th", { color: "light" }, t("Customer number")), h("th", { color: "light" }, t("Contact")), h("th", { color: "light" }, t("Orders")), this.whitelist ? h("th", { color: "light" }, t("Subscription")) : [], h("th", { color: "light" }, t("Method")), this.whitelist ? h("th", { color: "light" }, t("Balance")) : [], h("th", { color: "light" }, t("Login")), h("th", { color: "light" }, t("Status")))), this.customers
          ? this.customers
            .slice(0, this.count)
            .map(customer => {
            var _a, _b;
            return [
              h("ig-customer-table-row", { customer: customer, whitelist: this.whitelist, orders: this.orders ? this.orders[customer.id] : undefined, opened: (_a = this.opened[customer.id]) !== null && _a !== void 0 ? _a : "", selected: this.selected.hasOwnProperty.call(this.selected, customer.id) }),
              h("ig-customer-details", { opened: (_b = this.opened[customer.id]) !== null && _b !== void 0 ? _b : "", orders: this.orders ? this.orders[customer.id] : undefined, whitelist: this.whitelist, customer: customer }),
            ];
          })
          : null, h("td", { colSpan: 8 }, this.count < this.customers.length && (h("button", { onClick: () => (this.count += 100) }, h("smoothly-icon", { name: "chevron-down-circle", size: "large", toolTip: this.t("Load more customers") }))))),
      ];
    }
    return result;
  }
  get element() { return getElement(this); }
};
IntergiroCustomersTable.style = styleCss;

export { IntergiroCustomersTable as ig_customers_table };
