import { CocoComponent } from "@assets/js/coco/component";
import { getComponent } from "@helpers/alpine";

export default CocoComponent("appToolbar", () => {
  return {
    ready: false,
    startSectionWidth: null,
    endSectionWidth: null,

    get startGroupEl() {
      return this.$refs.startSection.firstElementChild;
    },

    get endGroupEl() {
      return this.$refs.endSection.firstElementChild;
    },

    get groups() {
      return [this.startGroupEl, this.endGroupEl]
        .filter((g) => g)
        .map((el) => getComponent(el, false));
    },

    init() {
      const toolbarWidth = this.$el.offsetWidth;
      let startSectionWidth = 0;
      let endSectionWidth = 0;

      if (this.startGroupEl) {
        startSectionWidth = Math.ceil(
          (this.startGroupEl.offsetWidth / toolbarWidth) * 100
        );
      }

      if (this.endGroupEl) {
        endSectionWidth = Math.ceil(
          (this.endGroupEl.offsetWidth / toolbarWidth) * 100
        );
      }

      this.$nextTick(() => {
        this.startSectionWidth = `${startSectionWidth}%`;
        this.endSectionWidth = `${endSectionWidth}%`;
        this.groups.forEach((group) => group.onResize());
        this.ready = true;
      });
    },
  };
});