import { CocoComponent } from "@js/coco.js";
import { getData } from "@helpers/alpine";
import { createSingleton } from "@libs/tippy";

export default CocoComponent("appButtonGroup", () => {
  return {
    options: ["collapsible"],

    containerWidth: 0,
    contentWidth: 0,
    collapsed: false,
    tooltip: null,

    get collapsible() {
      return this.$options.collapsible !== false;
    },

    get buttons() {
      const buttonElements = this.$el.querySelectorAll(
        "[data-component='app-button']"
      );
      return Array.from(buttonElements).map((el) => getData(el));
    },

    get parent() {
      return this.$root.parentElement;
    },

    init() {
      this.$nextTick(() => {
        if (!this.collapsible) return;

        this.createTooltipsSingleton();
        this.onResize();
      });

      this.$watch("collapsed", (value) => {
        this.buttons.forEach((button) => {
          button.isCollapsed = value;
        });
      });
    },

    createTooltipsSingleton() {
      const tippys = this.buttons
        .map((button) => {
          return button.showTooltip() && button.$root.__x_tippy;
        })
        .filter((t) => t);

      this.tooltip = createSingleton(tippys, {
        theme: "coco-tooltip",
        onShow: () => this.collapsed,
      });
    },

    onResize() {
      if (!this.collapsible) return;

      this.containerWidth = Math.ceil(this.parent.offsetWidth);
      if (this.collapsed) {
        if (this.containerWidth > this.contentWidth) {
          this.collapsed = false;
        }
      } else {
        if (this.containerWidth < this.contentWidth) {
          this.collapsed = true;
        } else {
          const contentWidth = Math.ceil(this.$refs.buttons.scrollWidth);
          this.contentWidth = contentWidth;
        }
      }
    },

    destroy() {
      if (this.tooltip) {
        this.tooltip.destroy();
        this.tooltip = null;
      }
    },
  };
});