import { r as registerInstance, j as createEvent, h, g as getElement } from './index-aeac5cad.js';
import './_commonjsHelpers-91fffb88.js';
import { d as dist } from './index-fdd60c34.js';

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

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

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

const PayfuncAccountsTable = 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.accounts)
      for (const account of this.accounts)
        this.selected[account.id] = account;
    this.selectedChanged.emit(this.selected);
    event.stopPropagation();
    event.preventDefault();
  }
  handleToggle(event) {
    const accounts = Object.assign({}, this.selected);
    if (event.detail.checked)
      accounts[event.detail.account.id] = event.detail.account;
    else
      delete accounts[event.detail.account.id];
    this.selectedChanged.emit((this.selected = accounts));
  }
  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.accounts)
      result = h("p", null, t("Loading accounts from server."));
    else if (this.accounts.length <= 0)
      result = h("p", null, t("There are no accounts 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("Account number")), h("th", { color: "light" }, t("Customer")), 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.accounts
          ? this.accounts
            .slice(0, this.count)
            .map(account => {
            var _a, _b;
            return [
              h("payfunc-account-table-row", { account: account, whitelist: this.whitelist, orders: this.orders ? this.orders[account.id] : undefined, opened: (_a = this.opened[account.id]) !== null && _a !== void 0 ? _a : "", selected: this.selected.hasOwnProperty.call(this.selected, account.id) }),
              h("payfunc-account-details", { opened: (_b = this.opened[account.id]) !== null && _b !== void 0 ? _b : "", orders: this.orders ? this.orders[account.id] : undefined, whitelist: this.whitelist, account: account }),
            ];
          })
          : null, h("td", { colSpan: 8 }, this.count < this.accounts.length ? (h("button", { onClick: () => (this.count += 100) }, h("smoothly-icon", { name: "chevron-down-circle", size: "large", toolTip: this.t("Load more accounts") }))) : (""))),
      ];
    }
    return result;
  }
  get element() { return getElement(this); }
};
PayfuncAccountsTable.style = styleCss;

export { PayfuncAccountsTable as payfunc_accounts_table };
