const $navList = document.querySelector('.nav__list');
const $body = document.querySelector('body');
const $shadowStart = document.querySelector('.nav__shadow--start');
const $shadowEnd = document.querySelector('.nav__shadow--end');

function activatePage($page) {
  const $activePage = document.querySelector('.page.is-active');
  
  if ($activePage) {
    $activePage.classList.remove('is-active');
  }
  
  $page.classList.add('is-active');
}

function activateItem($item, $container) {
  const href = $item.getAttribute('href');
  const $navItem = $container.querySelector(`[href="${href}"]`);
  const $activeItem = $container.querySelector('a.is-active');
  const $page = document.querySelector(href);
  
  if ($activeItem) {
    $activeItem.classList.remove('is-active');
  }
  
  $navItem.classList.add('is-active');

  activatePage($page);
}

function handleShadowVisibility() {
  const maxScrollStartReached = $navList.scrollLeft <= 0;
  const maxScrollEndReached = $navList.scrollLeft >= $navList.scrollWidth - $navList.offsetWidth;

  toggleShadow($shadowStart, maxScrollStartReached);
  toggleShadow($shadowEnd, maxScrollEndReached);
}

function toggleShadow($el, maxScrollReached) {
  const shadowIsVisible = $el.classList.contains('is-visible');
  const showShadow = !maxScrollReached && !shadowIsVisible;
  const hideShadow = maxScrollReached && shadowIsVisible;

  // Using requestAnimationFrame for optimal scroll performance.
  // https://stackoverflow.com/a/44779316
  if (showShadow) {
    window.requestAnimationFrame(() => $el.classList.add('is-visible'));
  } else if (hideShadow) {
    window.requestAnimationFrame(() => $el.classList.remove('is-visible'));
  }
}

$navList.addEventListener('scroll', (e) => handleShadowVisibility(e));

$body.addEventListener('click', (e) => {
  const $target = e.target;
  const isLink = $target.getAttribute('href').indexOf('#') === 0;
  
  if (isLink) {
    e.preventDefault();
    activateItem($target, $navList);
  }
});

handleShadowVisibility();