import { format } from "date-fns";
import { Build, Component, h, Listen, Prop, State, } from "@stencil/core";
import { modalController } from "@ionic/core";
import state from "../../../store";
export class AppPaymentList {
  constructor() {
    this.methodIcons = { check: "create", manual: "cash", card: "card" };
  }
  onChange(event) {
    var _a;
    if (((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.tagName) === "ION-SEARCHBAR") {
      this.paginationEl.query = event.detail.value ? event.detail.value : "";
    }
  }
  formatUSD(amount) {
    const formatter = new Intl.NumberFormat("en-US", {
      style: "currency",
      currency: "USD",
      minimumFractionDigits: 2,
    });
    return formatter.format(amount ? amount : 0);
  }
  async openPayCalculatorModal(amount, jobId) {
    var _a, _b, _c;
    this.payCalculatorModalEl = await modalController.create({
      component: "modal-pay-calculator",
      componentProps: {
        amount,
        disableAmount: true,
        disableReferral: true,
        jobId,
        payModelId: ((_c = (_b = (_a = state === null || state === void 0 ? void 0 : state.profile) === null || _a === void 0 ? void 0 : _a.location) === null || _b === void 0 ? void 0 : _b.defaultPayModel) === null || _c === void 0 ? void 0 : _c.id) || null,
      },
    });
    return this.payCalculatorModalEl.present();
  }
  async componentDidLoad() {
    if (!(Build === null || Build === void 0 ? void 0 : Build.isBrowser))
      return;
  }
  render() {
    return [
      h("ion-content", { class: "ion-padding" },
        h("floodteam-title-bar", null,
          h("ion-router-link", { href: "/payments" }, "Payments"),
          h("ion-buttons", { slot: "end" },
            h("ion-button", { fill: "solid", color: "primary", href: "/payments/new" }, "Add"))),
        h("fireenjin-search-bar", { ref: (el) => (this.filterBarEl = el), paginationEl: this.paginationEl, filters: [
            {
              name: "paymodelId",
              label: "Pay Model",
              endpoint: "listPayModels",
              icon: "pie-chart",
              resultsKey: "payModels",
            },
            {
              name: "locationId",
              label: "Location",
              endpoint: "listLocations",
              value: this.locationId,
              icon: "business",
              resultsKey: "locations",
            },
            {
              name: "method",
              label: "Payment Method",
              icon: "pricetags",
              multiple: true,
              options: [
                {
                  label: "Check",
                  value: "check",
                },
                {
                  label: "Manual",
                  value: "manual",
                },
                {
                  label: "Card",
                  value: "card",
                },
              ],
            },
          ] }),
        h("fireenjin-pagination", { ref: (el) => (this.paginationEl = el), endpoint: "listPayments", display: "list", limit: 20, resultsKey: "payments", listEl: ({ result: payment }) => {
            var _a, _b;
            return (h("ion-item", null,
              (payment === null || payment === void 0 ? void 0 : payment.method) && this.methodIcons[payment.method] && (h("ion-icon", { slot: "start", color: "medium", name: this.methodIcons[payment.method] })),
              h("ion-label", null,
                h("h2", null, (_a = payment.job) === null || _a === void 0 ? void 0 : _a.title),
                h("p", null,
                  this.formatUSD(payment.amount),
                  " paid by ",
                  payment.method),
                h("div", null,
                  h("ion-button", { fill: "clear", href: `/jobs/${(_b = payment.job) === null || _b === void 0 ? void 0 : _b.id}`, target: "_blank" }, "Open Job"))),
              payment.createdAt && (h("span", { slot: "end" },
                h("div", { style: {
                    textAlign: "center",
                  } }, (payment === null || payment === void 0 ? void 0 : payment.createdAt) &&
                  format(payment.createdAt.toDate(), "MM/dd/yyyy")),
                h("ion-button", { style: {
                    display: "block",
                  }, size: "small", fill: "clear", onClick: () => {
                    var _a;
                    return this.openPayCalculatorModal(payment === null || payment === void 0 ? void 0 : payment.amount, (_a = payment === null || payment === void 0 ? void 0 : payment.job) === null || _a === void 0 ? void 0 : _a.id);
                  } },
                  "Process",
                  h("ion-icon", { slot: "end", name: "pie-chart" }))))));
          } })),
      h("floodteam-navigation-footer", null),
    ];
  }
  static get is() { return "app-payment-list"; }
  static get originalStyleUrls() { return {
    "$": ["app-payment-list.css"]
  }; }
  static get styleUrls() { return {
    "$": ["app-payment-list.css"]
  }; }
  static get properties() { return {
    "locationId": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "location-id",
      "reflect": false
    }
  }; }
  static get states() { return {
    "paginationEl": {}
  }; }
  static get listeners() { return [{
      "name": "ionChange",
      "method": "onChange",
      "target": "body",
      "capture": false,
      "passive": false
    }]; }
}
