import tippy from "@assets/js/base/tippy";
import { CocoComponent } from "@assets/js/coco/component";

export default CocoComponent("appSidebarNavItem", () => {
  return {
    menu: null,
    menuObserver: null,
    active: false,

    init() {
      if (this.menuTemplate) {
        this.initMenu();
        this.observeMenuForChanges();
      }

      this.$watch("mobileLayout", () => this.onOrientationChange());
    },

    initMenu() {
      this.menu = tippy(this.$root, {
        theme: "coco-naked-dropdown",
        placement: this.menuPlacement,
        arrow: false,
        offset: [0, 0],
        trigger: "click",
        interactive: true,
        maxWidth: null,
        onShow: () => {
          this.active = true;
        },
        onHide: () => {
          this.active = false;
        },
        content: () => this.menuTemplate.innerHTML,
      });
    },

    observeMenuForChanges() {
      this.menuObserver = new MutationObserver((mutations) => {
        this.$nextTick(() => this.menu.setContent(this.menuTemplate.innerHTML));
      });

      this.menuObserver.observe(this.$root, {
        subtree: true,
        childList: true,
      });
    },

    onOrientationChange() {
      if (this.menu) {
        this.menu.setProps({
          placement: this.menuPlacement,
        });
      }
    },

    destroy() {
      if (this.menuObserver) {
        this.menuObserver.disconnect();
      }
    },

    root: {
      ["@turbo:load.document"]() {
        if (this.menu) {
          this.menu.hide();
        }
      },
      ":class": "{active}",
    },

    get menuTemplate() {
      return this.$root.querySelector("template");
    },

    get menuPlacement() {
      return this.mobileLayout ? "top" : "right-start";
    },
  };
});