export default parentElement => {
  const sections = document.querySelectorAll('.player-profile-list');
  const navLinks = parentElement.querySelectorAll('a');
  const stickyEl = parentElement.querySelector('.squad-navbar__wrapper');
  const stickyPosition = stickyEl.getBoundingClientRect().top;
  const offset = -10;
  const MOBILE_BREAKPOINT = 500;

  if (window.innerWidth > MOBILE_BREAKPOINT) {
    window.addEventListener('scroll', () => {
      let current = '';

      sections.forEach(section => {
        const sectionTop = section.offsetTop;
        const sectionHeight = section.clientHeight;
        const currentScrollPos = window.pageYOffset;

        if (currentScrollPos >= sectionTop + 600 - sectionHeight / 3) {
          current = section.getAttribute('id');
        }
      });

      navLinks.forEach(link => {
        link.classList.remove('active');
        if (link.classList.contains(current)) {
          link.classList.add('active');
        }
        link.addEventListener('click', event => {
          event.preventDefault();
          const targetId = event.target.getAttribute('data-nav-to');
          const tagetElm = document.querySelector(`#${targetId}`).offsetTop;
          let initial = 0;

          if (parentElement.querySelector('a.active')) {
            const currentElm = parentElement
              .querySelector('a.active')
              .getAttribute('data-nav-to');

            initial = document.querySelector(`#${currentElm}`).offsetTop;
          }
          if (initial < tagetElm) {
            window.scrollTo(0, tagetElm + 600);
          } else {
            const sctollTo =
              tagetElm -
              document.querySelector('.global-fixed-header').clientHeight;

            window.scrollTo(0, sctollTo + 600);
          }
        });
      });

      if (window.pageYOffset >= stickyPosition + offset) {
        const headerMargin = document.querySelector('.global-fixed-header')
          .style.top;

        if (headerMargin.replace('px', '') === '0') {
          stickyEl.style.top = `
            ${document.querySelector('.global-fixed-header').clientHeight}px`;
        } else {
          stickyEl.style.top = '';
        }
        parentElement.classList.add('nav-sticky');
      } else {
        parentElement.classList.remove('nav-sticky');
      }
    });
  }
};