import { h, } from "@stencil/core";
import state from "../../../store";
export class NavigationHeader {
  constructor() {
    this.isLoading = false;
    this.unreadFeedCount = 0;
    this.query = undefined;
  }
  onChange(event) {
    var _a, _b;
    if (((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.tagName) === "ION-SEGMENT") {
      state.navigationView = event.target.value;
    }
    else {
      this.query = ((_b = event === null || event === void 0 ? void 0 : event.target) === null || _b === void 0 ? void 0 : _b.value) || null;
    }
  }
  onSuccess(event) {
    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);
    }
    this.isLoading = false;
  }
  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() {
    return (h("ion-header", null, h("ion-segment", { scrollable: true, value: (state === null || state === void 0 ? void 0 : state.navigationView) || "menu" }, h("ion-segment-button", { value: "menu" }, h("ion-icon", { src: "/assets/logo/logo.svg", style: {
        width: "100px",
        height: "40px",
        color: "var(--ion-text-color)",
      } })), (state === null || state === void 0 ? void 0 : state.session) && (h("ion-segment-button", { value: "pins", layout: "icon-top" }, h("ion-icon", { name: "pin" }), h("ion-label", null, h("small", null, "Pins")))), (state === null || state === void 0 ? void 0 : state.session) && (h("ion-segment-button", { value: "profile", layout: "icon-top" }, h("ion-icon", { name: "person" }), h("ion-label", null, h("small", null, "Profile")))), (state === null || state === void 0 ? void 0 : state.session) && (h("ion-segment-button", { value: "feed", layout: "label-hide", style: {
        "--color": this.unreadFeedCount > 0 ? "var(--ion-color-warning)" : null,
        "--indicator-color": "var(--ion-color-warning)",
        "--color-checked": "var(--ion-color-warning)",
      } }, h("ion-icon", { name: "notifications" }))))));
  }
  static get is() { return "floodteam-navigation-header"; }
  static get states() {
    return {
      "isLoading": {},
      "unreadFeedCount": {},
      "query": {}
    };
  }
  static get events() {
    return [{
        "method": "fireenjinTrigger",
        "name": "fireenjinTrigger",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": ""
        },
        "complexType": {
          "original": "FireEnjinTriggerInput",
          "resolved": "FireEnjinTriggerInput<any>",
          "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
      }];
  }
}
