(function () {
  /**
   * Remove noscript tag
   */

  (function () {
    document.querySelector('.noscript').classList.remove('noscript');
  })();

  /**
   * Convert anchor references to nav references
   */

  (function () {
    document.querySelectorAll('a').forEach((a) => {
      if (a.href.indexOf('#_') !== -1) a.href = a.href.split('#_')[1];
    });
  })();

  /**
   * Navigation
   */

  let selectDetail = null,
    youtubeLoaded = false,
    imagesLoaded = false;

  (function () {
    const fadeTime = 300;
    const delay = 50;
    const content = document.querySelector('.content');
    const contentDivs = content.querySelectorAll('.detail');

    selectDetail = async (detail) => {
      document
        .querySelector('.content-wrapper')
        .classList.toggle('welcome', detail === 'welcome');

      // if (detail === 'home' && !youtubeLoaded) loadYoutube();
      if (detail === 'about' && !imagesLoaded) loadImages();

      const targetDiv = content.querySelector('#' + detail);
      if (targetDiv.classList.contains('active')) return;

      contentDivs.forEach((div) => div.classList.remove('active'));
      await new Promise((res) => setTimeout(res, fadeTime - delay));
      contentDivs.forEach((div) => div.classList.remove('present'));

      targetDiv.classList.add('present');
      await new Promise((res) => setTimeout(res, delay));
      targetDiv.classList.add('active');
    };
  })();

  /**
   * Routing
   */

  (function () {
    const nav = () => {
      const subPageUrl = location.pathname.substring(1);
      const nonNavPages = ['welcome', 'home', 'privacy'];

      let subPage;
      if (nonNavPages.includes(subPageUrl)) {
        subPage = subPageUrl;
      } else if (!subPage) {
        for (const navItem of document.querySelectorAll('.menu div')) {
          const navText = navItem.innerText.toLowerCase();
          if (navText === subPageUrl.toLowerCase()) {
            subPage = navText;
            break;
          }
        }
      }

      selectDetail(subPage || 'welcome');
    };

    window.addEventListener('popstate', nav);

    document.querySelectorAll('a').forEach((a) => {
      if (a.href.indexOf('mailto') !== -1 || a.target === '_blank') return;

      a.onclick = (event) => {
        event.preventDefault();
        if (location.href === a.href) return;
        window.history.pushState(
          {},
          '',
          a.href.indexOf('welcome') !== -1 ? '/' : a.href
        );
        nav();
      };
    });

    const validLocations = [
      'welcome',
      'home',
      'music',
      'about',
      'contact',
      'press',
      'privacy',
    ];
    if (!validLocations.includes(location.pathname.substring(1))) {
      window.history.pushState({}, '', '/');
    }

    nav();
  })();

  /**
   * Contact form
   */

  (function () {
    const form = document.querySelector('.contact-form');
    form.onsubmit = (event) => {
      event.preventDefault();

      const error = form.querySelector('.error');
      const button = form.querySelector('.send');
      button.disabled = true;
      button.value = 'Sending...';

      const data = new URLSearchParams();
      for (const pair of new FormData(form)) {
        data.append(pair[0], pair[1]);
      }

      fetch('sendMail', { method: 'POST', body: data })
        .then((response) => response.json())
        .then((response) => {
          if (response.error) {
            button.disabled = false;
            button.value = 'Send message';
            error.innerText = response.message;
          } else {
            error.innerText = '';
            button.value = 'Message sent!';
            button.classList.add('success');
          }
        });
    };
  })();

  /**
   * Music player
   */

  (function () {
    const audio = document.querySelector('.music-player audio');
    const title = document.querySelector('.music-title');
    const art = document.querySelector('.music-player .album-art img');

    // First music selected by default
    const a = document.querySelector('a.music-selection');
    audio.src = `./static/music/${a.dataset.musicSrc}.ogg`;
    title.innerText = a.dataset.musicTitle;
    art.src = a.parentNode.parentNode.querySelector('img').src; // EWW
    audio.load();

    document.querySelectorAll('a.music-selection').forEach((a) => {
      a.onclick = (event) => {
        event.preventDefault();
        audio.src = `./static/music/${a.dataset.musicSrc}.ogg`;
        audio.load();
        document.querySelector('.play-pause-btn').click();

        title.innerText = a.dataset.musicTitle;

        art.src = a.parentNode.parentNode.querySelector('img').src; // EWWWWWWW
      };
    });

    // Play/pause on space
    window.addEventListener('keydown', (event) => {
      if (
        event.key === ' ' &&
        !['INPUT', 'TEXTAREA'].includes(event.target.nodeName)
      ) {
        document.querySelector('.play-pause-btn').click();
      }
    });
  })();

  /**
   * Lazy load images
   */

  function loadImages() {
    for (const photoDiv of document.querySelectorAll('#about .img-container')) {
      const photoImg = document.createElement('img');
      photoImg.src = photoDiv.dataset.src.replace('.jpg', '_sm.jpg');

      photoImg.onclick = (event) => {
        event.preventDefault();
        const link = document.createElement('a');
        link.href = photoDiv.dataset.src;
        link.download = photoDiv.dataset.src;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      };

      photoDiv.parentElement.insertBefore(photoImg, photoDiv);
      photoDiv.outerHTML = '';
    }

    imagesLoaded = true;
  }
})();