import { CocoComponent } from "@js/coco";
import { getHiddenElementDimensions as getSize } from "@helpers/dom";
import tokens from "@config/tokens.cjs";

export default CocoComponent("appNavBar", () => {
  const mobileMaxWidth = parseInt(tokens.app.screens.md, 10);
  return {
    mobile: true,
    init() {
      const sizeObserver = new ResizeObserver(
        Alpine.throttle((entries) => {
          this.$nextTick(() => {
            const navWidth = entries[0].contentRect.width;
            const linksWidth = this.$refs.links.offsetWidth;
            const primaryWidth = getSize(this.$refs.primaryLinks, "flex").width;
            const secondaryWidth = getSize(
              this.$refs.secondaryLinks,
              "flex"
            ).width;
            const difference = linksWidth - primaryWidth - secondaryWidth;

            this.mobile =
              navWidth < mobileMaxWidth || this.mobudifference <= 50;
          });
        }, 20)
      );

      sizeObserver.observe(this.$root);
    },
  };
});