/* eslint-disable no-param-reassign */
const MOBILE_BREAKPOINT = 800;

const initFixedNavbar = parentElement => {
  let prevScrollPos = window.pageYOffset;
  let isScrolling = false;

  const minScrollDistance = window.innerWidth <= MOBILE_BREAKPOINT ? 10 : 20;

  const fixedHeaderElement = document.querySelector('.fixed-header');

  const navElement = parentElement.querySelector(
    '[data-behavior="squad-navbar--nav-list"]'
  );

  const navLinks = navElement.querySelectorAll('a');

  // get the first link and navto block
  const firstNavLink = navLinks[0];
  const firstNavToElement = document.getElementById(firstNavLink.dataset.navTo);

  // get the last link and navto block
  const lastNavLink = navLinks[navLinks.length - 1];
  const lastNavToElement = document.getElementById(lastNavLink.dataset.navTo);

  const onScroll = () => {
    if (isScrolling) {
      return;
    }

    isScrolling = true;

    const startPoint =
      firstNavToElement.offsetHeight + firstNavToElement.offsetTop;

    const stopPoint =
      lastNavToElement.offsetHeight + lastNavToElement.offsetTop;

    setTimeout(() => {
      const currentScrollPos = window.pageYOffset;

      if (currentScrollPos > startPoint && currentScrollPos < stopPoint) {
        parentElement.style.position = 'fixed';

        // Scrolling down (at least 20px)
        if (currentScrollPos > prevScrollPos + minScrollDistance) {
          // position it to top
          parentElement.style.top = 0;
          // Scroll up (at least 20px)
        } else if (currentScrollPos < prevScrollPos - minScrollDistance) {
          // if header is visible then set its offsetHeight as offset top position of nav element
          parentElement.style.top = `${fixedHeaderElement.offsetHeight - 1}px`;
        }
      } else {
        parentElement.style.position = 'static';
      }

      prevScrollPos = currentScrollPos;
      isScrolling = false;
    }, 110);
  };

  return onScroll;
};

const bindEvents = parentElement => {
  const onScroll = initFixedNavbar(parentElement);

  const navlistElement = parentElement.querySelector(
    '[data-behavior="squad-navbar--nav-list"]'
  );

  const navlistLinks = navlistElement.querySelectorAll('a');

  navlistElement.addEventListener('click', event => {
    event.preventDefault();
    // switch off
    window.removeEventListener('scroll', onScroll, { passive: true });

    const { target } = event;
    const navToElementId = target.dataset.navTo;
    const navToElement = document.getElementById(navToElementId);

    if (navToElement) {
      navlistLinks.forEach(link => {
        link.classList.remove('active');
      });

      target.classList.add('active');

      navToElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }

    // switch on
    setTimeout(() => {
      window.addEventListener('scroll', onScroll, { passive: true });
    }, 50);
  });

  window.addEventListener('scroll', onScroll, { passive: true });
};

export default parentElement => {
  // do scroll top before capturing scroll positions.
  window.scroll({
    top: 0,
    left: 0,
    behavior: 'smooth',
  });
  // event bindings
  bindEvents(parentElement);
};