import { Component, Event, Listen, h, State, Build, } from "@stencil/core";
import formatUSD from "../../../helpers/formatUSD";
import state from "../../../store";
import searchServices from "../../../helpers/searchServices";
import flatten from "../../../helpers/flatten";
import omit from "../../../helpers/omit";
import getServiceTypes from "../../../helpers/getServiceTypes";
export class AppServiceList {
  constructor() {
    this.selectedIds = [];
    this.selectedServices = [];
    this.services = [];
    this.filter = {
      tab: null,
    };
  }
  async onSearchInput(event) {
    this.query = event.target.value;
    this.services = await searchServices(this.query);
  }
  async onTrigger(event) {
    var _a, _b, _c, _d, _e, _f;
    if (event.detail.name === "set" && ((_b = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.payload) === null || _b === void 0 ? void 0 : _b.name)) {
      this.filter = {
        ...this.filter,
        [(_d = (_c = event.detail) === null || _c === void 0 ? void 0 : _c.payload) === null || _d === void 0 ? void 0 : _d.name]: ((_f = (_e = event === null || event === void 0 ? void 0 : event.detail) === null || _e === void 0 ? void 0 : _e.payload) === null || _f === void 0 ? void 0 : _f.value) || null,
      };
      this.services = await searchServices(this.query, (service) => { var _a, _b; return (_b = (_a = this.filter) === null || _a === void 0 ? void 0 : _a.tab) === null || _b === void 0 ? void 0 : _b.includes(service === null || service === void 0 ? void 0 : service.tab); });
    }
  }
  async toggleService(event) {
    var _a, _b, _c;
    if (!((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value))
      return;
    event.preventDefault();
    event.stopPropagation();
    const selectedIds = this.selectedIds;
    console.log(event);
    if (this.selectedIds.includes((_b = event === null || event === void 0 ? void 0 : event.target) === null || _b === void 0 ? void 0 : _b.value)) {
      selectedIds.splice(this.selectedIds.indexOf(event.target.value), 1);
    }
    else {
      selectedIds.push((_c = event === null || event === void 0 ? void 0 : event.target) === null || _c === void 0 ? void 0 : _c.value);
    }
    this.selectedIds = selectedIds;
    console.log(this.selectedIds);
  }
  async componentDidLoad() {
    if (!(Build === null || Build === void 0 ? void 0 : Build.isBrowser))
      return;
    this.services = await searchServices(this.query);
  }
  render() {
    var _a, _b, _c;
    return [
      h("ion-content", { class: "ion-padding" },
        h("floodteam-title-bar", null,
          h("ion-router-link", { href: "/services" }, "Services"),
          h("ion-buttons", { slot: "end" },
            h("ion-button", { fill: "solid", color: "primary", href: "/services/new" }, "Add"))),
        h("fireenjin-search-bar", { paginationEl: this.paginationEl, filters: ((_a = state === null || state === void 0 ? void 0 : state.claims) === null || _a === void 0 ? void 0 : _a.tester) || ((_b = state === null || state === void 0 ? void 0 : state.claims) === null || _b === void 0 ? void 0 : _b.admin)
            ? [
              {
                name: "tab",
                label: "Tab",
                icon: "albums",
                multiple: true,
                options: getServiceTypes(),
                value: (_c = this.filter) === null || _c === void 0 ? void 0 : _c.tab,
              },
            ]
            : null }),
        h("ion-card", null,
          h("ion-list", { class: "ion-no-padding" },
            h("fireenjin-pagination", { approxItemHeight: 84, results: this.services, renderItem: (service) => (h("ion-item", { href: `/services/${service.id}`, detail: true },
                h("ion-checkbox", { id: `toggle.${(service === null || service === void 0 ? void 0 : service.id) || ""}`, slot: "start", value: service === null || service === void 0 ? void 0 : service.id, onClick: (event) => this.toggleService(event), checked: this.selectedIds.includes(service === null || service === void 0 ? void 0 : service.id) }),
                h("ion-label", null,
                  h("h2", null,
                    (service === null || service === void 0 ? void 0 : service.name) || "",
                    " "),
                  h("div", null, Object.entries((service === null || service === void 0 ? void 0 : service.prices) || {}).map(([name, amount]) => (h("ion-chip", null,
                    h("ion-label", null,
                      name || "",
                      ":",
                      " ",
                      h("ion-text", { color: "success", slot: "end" }, formatUSD(amount || 0)))))))))) })))),
      h("floodteam-navigation-footer", null,
        h("fireenjin-chip-bar", null,
          h("ion-chip", { onClick: () => this.fireenjinTrigger.emit({
              name: "import",
              type: "services",
            }) },
            h("ion-icon", { class: "ft-icon-style", name: "cloud-upload" }),
            h("ion-label", null, "Import from CSV")),
          h("ion-chip", { onClick: () => this.fireenjinTrigger.emit({
              name: "export",
              payload: this.services.map((service) => flatten(omit(service, "createdAt", "updatedAt"))),
            }) },
            h("ion-icon", { name: "cloud-download", class: "ft-icon-style" }),
            h("ion-label", null, "Export to CSV")))),
    ];
  }
  static get is() { return "app-service-list"; }
  static get originalStyleUrls() { return {
    "$": ["app-service-list.css"]
  }; }
  static get styleUrls() { return {
    "$": ["app-service-list.css"]
  }; }
  static get states() { return {
    "paginationEl": {},
    "query": {},
    "selectedIds": {},
    "selectedServices": {},
    "services": {},
    "filter": {}
  }; }
  static get events() { return [{
      "method": "fireenjinTrigger",
      "name": "fireenjinTrigger",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "FireEnjinTriggerInput",
        "resolved": "FireEnjinTriggerInput",
        "references": {
          "FireEnjinTriggerInput": {
            "location": "import",
            "path": "@fireenjin/sdk"
          }
        }
      }
    }]; }
  static get listeners() { return [{
      "name": "ionInput",
      "method": "onSearchInput",
      "target": undefined,
      "capture": false,
      "passive": false
    }, {
      "name": "fireenjinTrigger",
      "method": "onTrigger",
      "target": "document",
      "capture": false,
      "passive": false
    }]; }
}
//# sourceMappingURL=app-service-list.js.map