Secondary Navigation

export const ds2Secondary = () => {
  document.addEventListener("DOMContentLoaded", function () {
    const secondaryNav = document.querySelectorAll('.ds2-secondary-nav');

    secondaryNav.forEach( ( nav ) => {

      let currentItem = 0; // tracks which item is showing in furthest left position
      /*
      Following variable used to stop left/right arrow function running THEN scroll function
      Both functions incremement the current position and don't want it running twice
      */
      let keyJustPressed = false;

      const rightArrow = nav.querySelectorAll('.ds2-secondary-nav__arrow-container--right')[0];
      const leftArrow = nav.querySelectorAll('.ds2-secondary-nav__arrow-container--left')[0];
      const linksContainer = nav.querySelectorAll('.ds2-secondary-nav__links')[0];
      const links = linksContainer.querySelectorAll('.ds2-secondary-nav__link');

      // function to determine if arrows are disabled or not
      let currentItemCheck = () => {
        const leftButton = leftArrow.querySelector('button');
        const rightButton = rightArrow.querySelector('button');

        if (currentItem == 0) {
          leftButton.classList.add('ds2-secondary-nav__arrow-container--disabled');
          leftButton.setAttribute('disabled', '');
        } else {
          leftButton.classList.remove('ds2-secondary-nav__arrow-container--disabled');
          leftButton.removeAttribute('disabled');
        }
        if (currentItem == links.length - 1) {
          rightButton.classList.add('ds2-secondary-nav__arrow-container--disabled');
          rightButton.setAttribute('disabled', '');
        } else {
          rightButton.classList.remove('ds2-secondary-nav__arrow-container--disabled');
          rightButton.removeAttribute('disabled');
        }
      };

      /*
      links container is set to not show in CSS until position establised to stop visual jump to selected item
      here, set links to show whenever there's a window resize
      */
      window.addEventListener('resize', () => {
        linksContainer.style.visibility = "visible";
      });

      // add arrows to the left and right of the links container if needed
      const updateOverflow = () => {
        const linksOverflowContainer = linksContainer.scrollWidth > linksContainer.clientWidth;
        nav.querySelectorAll('.ds2-secondary-nav__arrow').forEach((arrow) => {
          arrow.style.display = linksOverflowContainer ? '' : 'none';
        });
        return linksOverflowContainer;
      };
      let linksOverflowContainer = updateOverflow();
      window.addEventListener('resize', () => {
        linksOverflowContainer = updateOverflow();
      });
      // Needs to be if links dont fit on screen, then show arrows and allow scroll to selected item
      if (linksOverflowContainer) {
        console.log("links overflow container");
        /*
        Current item on mobile is in left most position
        Extend margin of last item to allow this
        */
        let lastItemMargin = window.innerWidth - links[links.length - 1].offsetWidth - 120;
        links[links.length - 1].style.marginRight = lastItemMargin + "px";

        // get left positions of each item (so arrows can move in to position)
        const linksX = [];
        linksX[0] = 0;
        let currentX = 0;
        for (let i = 1; i < links.length; i++) {
          linksX[i] = currentX + links[i-1].offsetWidth;
          currentX +=  links[i-1].offsetWidth;

          /*
          by default scroll is at first item
          if another item has selected class, move scroll to this item
          */
          if (links[i-1].classList.contains("ds2-secondary-nav__link--selected")) {
            currentItem = i - 1;
            linksContainer.scrollTo({
              left: linksX[currentItem],
              behavior: 'smooth'
            });
          }
        }
        /*
        above will have put scroll in to correct position
        now can show the links without a visible jump
        */
        linksContainer.style.visibility = "visible";
        currentItemCheck();
        /*
        When using scroll bar we need to adjust current item (used by arrows)
        to correlate scroll with arrows
        */
        linksContainer.addEventListener('scroll', (event) => {
          if (keyJustPressed == false) {
            const currentLeft = event.target.scrollLeft;

            // variable to see if item changed (if yes, then run currentItemCheck function)
            let tempCurrentItem = currentItem;
            for (let i = 0; i < links.length; i++) {
              if (currentLeft > linksX[i]) {
                currentItem = i + 1;
              }
              if (currentLeft == 0) {
                currentItem = 0;
              }
            }

            if (tempCurrentItem != currentItem || currentItem == 0) {
              currentItemCheck();
            }
            keyJustPressed = false;
          }
          keyJustPressed = false;
        });

        // Right arrow pressed, changes currentItem and scrolls to next item (if not last item)
        rightArrow.addEventListener("click", () => {
          if (currentItem < links.length - 1) {
            currentItem += 1;
            keyJustPressed = true;
            currentItemCheck();
            linksContainer.scrollTo({
              left: linksX[currentItem],
              behavior: 'smooth'
            });
          }
        });

        // Left arrow pressed, changes currentItem and scrolls to previous item (if not first item)
        leftArrow.addEventListener("click", () => {
          if (currentItem > 0) {
            currentItem -= 1;
            keyJustPressed = true;
            currentItemCheck();
            linksContainer.scrollTo({
              left: linksX[currentItem],
              behavior: 'smooth'
            });
          }

        });
      }
    });
  });
}