import { modalController } from "@ionic/core";
import { h, Host, } from "@stencil/core";
import state from "../../../store";
export class AppHeader {
  constructor() {
    this.reorder = false;
    this.isDragging = false;
    this.showSideNav = true;
  }
  dragOver(event) {
    event.preventDefault();
    // const cardEl: HTMLElement = event.target.closest("ion-card");
    // cardEl.style.opacity = "1";
  }
  dragLeave(event) {
    event.preventDefault();
    // const cardEl: HTMLElement = event.target.closest("ion-card");
    // cardEl.style.opacity = "0.6";
  }
  drag(event) {
    console.log(event);
    this.isDragging = true;
  }
  toggleNav() {
    const sideMenu = document.getElementsByTagName("ion-menu");
    this.showSideNav = !this.showSideNav;
    sideMenu[0].hidden = !sideMenu[0].hidden;
  }
  async drop(event) {
    event.preventDefault();
    // var data = ev.dataTransfer.getData('text');
    // ev.target.closest('ion-list').appendChild(document.getElementById(data));
    this.isDragging = false;
  }
  async openSupportModal(event) {
    this.modal = await modalController.create({
      cssClass: "modal-support",
      component: "modal-support",
      componentProps: {
        user: (state === null || state === void 0 ? void 0 : state.profile) || null,
      },
      backdropDismiss: false,
    });
    this.modal.present();
    return event;
  }
  render() {
    var _a, _b;
    return (h(Host, null, h("fireenjin-chip-bar", { ref: (el) => (this.chipBarEl = el), onDrop: (event) => this.drop(event), onDragOver: (event) => this.dragOver(event), onDragLeave: (event) => this.dragLeave(event) }, h("ion-router-link", { title: "Home", href: "/dashboard" }, h("ion-chip", { title: "Home" }, h("ion-icon", { "aria-hidden": "true", name: "home", class: {
        "ft-icon-style": true,
      } }), h("ion-label", null, "Home"))), (_b = (_a = ((state === null || state === void 0 ? void 0 : state.pins) || [])).map) === null || _b === void 0 ? void 0 :
      _b.call(_a, (pin) => (h("ion-router-link", { title: pin === null || pin === void 0 ? void 0 : pin.name, href: (pin === null || pin === void 0 ? void 0 : pin.href) || "#", onClick: (event) => (pin === null || pin === void 0 ? void 0 : pin.trigger)
          ? this.fireenjinTrigger.emit({
            event,
            payload: (pin === null || pin === void 0 ? void 0 : pin.payload) || null,
            name: pin.trigger,
          })
          : null }, h("ion-chip", { title: pin.name, draggable: this.reorder, onDragStart: (event) => this.drag(event) }, h("ion-icon", { "aria-hidden": "true", name: pin.icon, class: {
          "ft-icon-style": true,
        } }), (pin === null || pin === void 0 ? void 0 : pin.name) && h("ion-label", null, pin.name))))), h("ion-chip", { onClick: () => this.toggleNav(), title: "Toggle Side Menu" }, h("ion-icon", { "aria-hidden": "true", color: "warning", name: this.showSideNav ? "eye-off" : "eye" })), h("ion-router-link", { title: "Get Help", href: "#support", onClick: (event) => this.openSupportModal(event) }, h("ion-chip", { color: "warning" }, h("ion-icon", { "aria-hidden": "true", color: "warning", name: "help-circle", style: {
        "--ft-icon-primary": "var(--ion-color-warning)",
      }, class: {
        "ft-icon-style": true,
      } }), h("ion-label", null, "Get Help"))))));
  }
  static get is() { return "floodteam-pin-bar"; }
  static get originalStyleUrls() {
    return {
      "$": ["pin-bar.css"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["pin-bar.css"]
    };
  }
  static get properties() {
    return {
      "reorder": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "reorder",
        "reflect": false,
        "defaultValue": "false"
      }
    };
  }
  static get states() {
    return {
      "isDragging": {},
      "showSideNav": {}
    };
  }
  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"
            }
          }
        }
      }];
  }
}
