import { modalController } from "@ionic/core";
import { Component, Event, h, Listen, Prop, State, } from "@stencil/core";
import state from "../../../store";
export class NavigationHeader {
  constructor() {
    this.viewAlerts = false;
    this.isLoading = false;
  }
  onChange(event) {
    const listEl = event.target.closest("ion-card ion-list");
    if (listEl) {
      this.setProgress(listEl);
    }
  }
  onSuccess(event) {
    var _a, _b;
    if (event.detail.endpoint === "listFeed") {
      setTimeout(() => {
        this.paginationEl
          .querySelectorAll("[data-trigger]")
          .forEach((triggerEl) => {
          if (triggerEl.getAttribute("triggerer"))
            return;
          triggerEl.addEventListener("click", (triggerEvent) => {
            var _a, _b, _c, _d;
            triggerEvent.preventDefault();
            const name = (_b = (_a = triggerEvent === null || triggerEvent === void 0 ? void 0 : triggerEvent.target) === null || _a === void 0 ? void 0 : _a.dataset) === null || _b === void 0 ? void 0 : _b.trigger;
            const payload = (_d = (_c = triggerEvent === null || triggerEvent === void 0 ? void 0 : triggerEvent.target) === null || _c === void 0 ? void 0 : _c.dataset) === null || _d === void 0 ? void 0 : _d.triggerPayload;
            this.fireenjinTrigger.emit({
              name,
              payload,
            });
          });
          triggerEl.setAttribute("triggerer", "true");
        });
      }, 1000);
    }
    else if (event.detail.endpoint === "findJob") {
      this.job = ((_b = (_a = event === null || event === void 0 ? void 0 : event.detail) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.job) || null;
    }
    this.isLoading = false;
  }
  async openNoteModal() {
    var _a;
    this.noteModalEl = await modalController.create({
      cssClass: "modal-note",
      component: "modal-note",
      componentProps: {
        jobId: ((_a = this.job) === null || _a === void 0 ? void 0 : _a.id) || null,
      },
    });
    this.noteModalEl.present();
  }
  setProgress(listEl) {
    var _a;
    let completed = 0;
    const items = Array.from(listEl.querySelectorAll("ion-item"));
    const progressBarEl = listEl.querySelector("ion-progress-bar");
    for (const item of items) {
      completed =
        completed + (((_a = item === null || item === void 0 ? void 0 : item.querySelector("ion-checkbox")) === null || _a === void 0 ? void 0 : _a.checked) ? 1 : 0);
    }
    const progressMath = completed / items.length;
    const progress = isFinite(progressMath) && progressMath > 0 ? progressMath : 0;
    progressBarEl.value = progress;
  }
  render() {
    var _a, _b, _c, _d, _e, _f;
    return (h("ion-header", null,
      h("ion-grid", null,
        h("ion-row", { class: "ion-justify-content-between" },
          h("ion-col", { size: "6", class: "ion-align-self-center" },
            h("ion-menu-toggle", { autoHide: false },
              h("ion-router-link", { href: ((_a = state === null || state === void 0 ? void 0 : state.session) === null || _a === void 0 ? void 0 : _a.uid) ? "/dashboard" : "/" },
                h("ion-icon", { style: {
                    color: "var(--ion-text-color)",
                    height: "60px",
                    width: "120px",
                  }, src: "/assets/logo/logo.svg" })))),
          (state === null || state === void 0 ? void 0 : state.session) && (h("ion-col", { size: "6", class: "ion-align-self-center", style: {
              display: "flex",
            } },
            h("ion-button", { onClick: () => (this.viewAlerts = !this.viewAlerts), color: "warning", fill: "clear", size: "small", style: {
                margin: "auto 5px auto auto",
                display: "inline-flex",
              } },
              0,
              h("ion-icon", { slot: "end", name: this.viewAlerts ? "close-circle" : "notifications" })),
            h("ion-menu-toggle", { autoHide: false },
              h("ion-router-link", { href: "/profile", style: {
                  position: "relative",
                  margin: "auto",
                  display: "inline-flex",
                } },
                h("fireenjin-avatar", { style: {
                    display: "inline-block",
                    position: "relative",
                    borderRadius: "4px",
                    padding: "0 !important",
                    overflow: "hidden",
                  }, color: "secondary", initials: `${((_b = state === null || state === void 0 ? void 0 : state.profile) === null || _b === void 0 ? void 0 : _b.firstName)
                    ? (_c = state === null || state === void 0 ? void 0 : state.profile) === null || _c === void 0 ? void 0 : _c.firstName.charAt(0)
                    : ""}${((_d = state === null || state === void 0 ? void 0 : state.profile) === null || _d === void 0 ? void 0 : _d.lastName)
                    ? (_e = state === null || state === void 0 ? void 0 : state.profile) === null || _e === void 0 ? void 0 : _e.lastName.charAt(0)
                    : ""}`, src: (_f = state === null || state === void 0 ? void 0 : state.profile) === null || _f === void 0 ? void 0 : _f.photo })))))),
        this.viewAlerts && (h("ion-row", null,
          h("ion-col", { size: "10" },
            h("fireenjin-search-bar", { ref: (el) => (this.filterBarEl = el), paginationEl: this.paginationEl, showFilter: false, filters: [
                {
                  name: "tags",
                  label: "Tags",
                  endpoint: "listLocations",
                  icon: "business",
                  dataPropsMap: {
                    locations: "results",
                  },
                },
                {
                  name: "type",
                  label: "Type",
                  icon: "folder-open",
                  options: [
                    {
                      label: "All",
                      value: null,
                    },
                    {
                      label: "Note",
                      value: "note",
                    },
                    {
                      label: "Alert",
                      value: "alert",
                    },
                    {
                      label: "Job",
                      value: "job",
                    },
                    {
                      label: "Payment",
                      value: "payment",
                    },
                    {
                      label: "Admin",
                      value: "admin",
                    },
                  ],
                },
              ] })),
          h("ion-col", { size: "2" },
            h("ion-fab", { vertical: "center", horizontal: "end", onClick: () => this.openNoteModal() },
              h("ion-fab-button", null,
                h("ion-icon", { name: "add" })))))))));
  }
  static get is() { return "floodteam-navigation-header"; }
  static get properties() { return {
    "viewAlerts": {
      "type": "boolean",
      "mutable": true,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "view-alerts",
      "reflect": false,
      "defaultValue": "false"
    }
  }; }
  static get states() { return {
    "isLoading": {},
    "job": {}
  }; }
  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": "ionChange",
      "method": "onChange",
      "target": undefined,
      "capture": false,
      "passive": false
    }, {
      "name": "fireenjinSuccess",
      "method": "onSuccess",
      "target": "document",
      "capture": false,
      "passive": false
    }]; }
}
//# sourceMappingURL=navigation-header.js.map