import { r as registerInstance, B as Build, h, f as getElement } from './index-e0adbd54.js';

const graphPaySplitsCss = "floodteam-graph-pay-splits floodteam-error .floodteam-error-wrapper{padding:0 !important}floodteam-graph-pay-splits .graph-pay-splits-wrapper{display:block;max-width:400px;width:90%;margin:0 auto}floodteam-graph-pay-splits h1{text-align:center;color:var(--ion-color-success) !important;font-size:2em;font-weight:bold}floodteam-graph-pay-splits floodteam-graph{display:block;max-width:400px;margin:0 auto}floodteam-graph-pay-splits floodteam-item h4{color:var(--ion-color-medium-shade) !important}floodteam-graph-pay-splits floodteam-item floodteam-badge{--floodteam-badge-padding:0 10px;--floodteam-badge-background:var(--ion-color-success);--floodteam-badge-color:#ffffff}";

const GraphPaySplits = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.users = [];
    this.graphTitle = undefined;
    this.datasets = [];
    this.labels = [];
    this.currentUsers = [];
  }
  async setUsers(users) {
    try {
      this.currentUsers =
        typeof users === "string"
          ? JSON.parse(users)
          : users.length > 0
            ? users
            : this.graphPaySplitsEl.getAttribute("users")
              ? JSON.parse(this.graphPaySplitsEl.getAttribute("users"))
              : [];
      const backgroundColor = [
        "#3e95cd",
        "#8e5ea2",
        "#3cba9f",
        "#e8c3b9",
        "#c45850",
      ];
      const data = [];
      this.users.map((record) => {
        this.labels.push(record.user.user_name);
        data.push(record.amount);
      });
      this.datasets = [
        {
          backgroundColor,
          data,
        },
      ];
      return this.currentUsers;
    }
    catch (error) {
      console.log(error);
      return [];
    }
  }
  onUsersUpdate() {
    this.setUsers(this.users);
  }
  formatUSD(amount) {
    const formatter = new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
    });
    return formatter.format(amount);
  }
  getPaymentText(payment) {
    let paymentText = "";
    if (payment.type === "manual") {
      paymentText = `${this.formatUSD(payment.amount)} paid manually`;
    }
    else if (payment.type === "charge") {
      paymentText = `${this.formatUSD(payment.amount)} paid on ${payment.brand} card ending in ${payment.ending_in}`;
    }
    else if (payment.type === "check") {
      paymentText = `${this.formatUSD(payment.amount)} paid by check ${payment.check_number}`;
    }
    return paymentText;
  }
  componentDidLoad() {
    if (!(Build === null || Build === void 0 ? void 0 : Build.isBrowser))
      return;
    this.setUsers(this.users);
  }
  render() {
    return (h("div", { class: "graph-pay-splits-wrapper" }, this.graphTitle ? h("h1", null, this.graphTitle) : null, h("fireenjin-graph", { type: "doughnut", datasets: this.datasets, labels: this.labels }), this.users.map((record) => {
      var _a;
      return (h("ion-item", null, h("fireenjin-avatar", { src: ((_a = record === null || record === void 0 ? void 0 : record.user) === null || _a === void 0 ? void 0 : _a.user_avatar)
          ? record.user.user_avatar
          : "./img/avatar.png", slot: "start" }), h("h4", null, record.user.user_name), record.payables && record.payables.length > 0 ? (record.payables.map((payable) => [
        h("p", null, payable.type === "percent"
          ? payable.percent * 100 + "%"
          : "Flat", " ", "- ", record.user.group.group_name),
        payable.payment ? (h("p", null, this.getPaymentText(payable.payment))) : null,
      ])) : (h("floodteam-error", { message: "No payment is tied to this payable!" })), h("ion-badge", { slot: "end" }, this.formatUSD(record.amount))));
    })));
  }
  get graphPaySplitsEl() { return getElement(this); }
  static get watchers() { return {
    "users": ["onUsersUpdate"]
  }; }
};
GraphPaySplits.style = graphPaySplitsCss;

export { GraphPaySplits as fireenjin_graph_pay_splits };
