import tippy from "@libs/tippy";
import { CocoComponent } from "@js/coco";

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

    init() {
      if (this.$refs.menu) {
        this.menu = tippy(this.$el, {
          theme: "coco-naked-dropdown",
          placement: this.menuPlacement,
          arrow: false,
          offset: [0, 0],
          trigger: "click",
          interactive: true,
          maxWidth: null,
          content: () => {
            return this.$refs.menu.innerHTML;
          },
        });
      }

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

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

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