let resizeObserver;
let popperInstance;

new Vue({
  el: "#app",
  data() {
    return {
      actions: ["Edit", "Save", "Copy", "Rename", "Share", "Delete"],
      isMenuOpen: false,
      menuActions: [] // Actions that should be shown in the menu
    };
  },
  computed: {
    actionButtons() {
      // Actions that should be shown as buttons outside the menu
      return this.actions.filter(
        (action) => !this.menuActions.includes(action)
      );
    }
  },
  mounted() {
    // Attach ResizeObserver to the container
    resizeObserver = new ResizeObserver(this.onResize);
    resizeObserver.observe(this.$refs.container);
    // Close the menu on any click
    document.addEventListener("click", this.closeMenu);
  },
  beforeDestroy() {
    // Clean up the observer and event listener
    resizeObserver.disconnect();
    document.removeEventListener("click", this.closeMenu);
  },
  methods: {
    onResize() {
      requestAnimationFrame(async () => {
        // Place all buttons outside the menu
        if (this.menuActions.length) {
          this.menuActions = [];
          await this.$nextTick();
        }

        const isOverflowing = () =>
          this.$refs.container.scrollWidth > this.$refs.container.offsetWidth;

        // Move buttons into the menu until the container is no longer overflowing
        while (isOverflowing() && this.actionButtons.length) {
          const lastActionButton = this.actionButtons[
            this.actionButtons.length - 1
          ];
          this.menuActions.unshift(lastActionButton);
          await this.$nextTick();
        }
      });
    },
    toggleMenu() {
      if (!this.isMenuOpen) {
        this.isMenuOpen = true;
        popperInstance = Popper.createPopper(
          this.$refs.menuButton,
          this.$refs.menu,
          {
            placement: "bottom-end",
            modifiers: [
              { name: "flip" },
              { name: "offset", options: { offset: [0, 1] } }
            ]
          }
        );
      } else this.closeMenu();
    },
    closeMenu() {
      if (!this.isMenuOpen) return;
      this.isMenuOpen = false;
      popperInstance.destroy();
      popperInstance = undefined;
    },
    doAction(action) {
      console.log(action + " clicked!");
    },
    changeSize(size) {
      this.$refs.container.style.width = size;
    }
  }
});