let isMobile = window.innerWidth < 769;
let keyPressAudio = new Audio('/static/key-press.mp3');
let headerAnimationTerminated = false;
let cursorHTML = '<span class="cursor">&ensp;</span>';

window.addEventListener('resize', () => {
  isMobile = window.innerWidth < 769;
});

function listenUserScroll(e) {
  e.preventDefault();
}

function blockUserScrolling() {
  document.querySelector('html').style.overflowY = 'hidden';
  window.addEventListener('mousewheel', listenUserScroll, { passive: false });
  window.addEventListener('touchmove', listenUserScroll, { passive: false });
}

function unblockUserScrolling() {
  document.querySelector('html').style.overflowY = 'auto';
  window.removeEventListener('mousewheel', listenUserScroll);
  window.removeEventListener('touchmove', listenUserScroll);
}

function hideTopNav() {
  let topNav = document.querySelector('.top-nav');
  topNav.style.opacity = '0';
  topNav.style.display = 'none';
}

function hideContent() {
  hideTopNav();
  let mainContainer = document.querySelector('main');
  let footer = document.querySelector('footer');
  mainContainer.style.opacity = '0';
  mainContainer.style.display = 'none';
  footer.style.opacity = '0';
  footer.style.display = 'none';
}

function showContent(cb) {
  let mainContainer = document.querySelector('main');
  let footer = document.querySelector('footer');
  let topNav = document.querySelector('.top-nav');

  topNav.style.transition = '100ms';
  topNav.style.opacity = '1';
  topNav.style.display = 'inline-flex';

  setTimeout(() => {
    mainContainer.style.transition = '500ms';
    mainContainer.style.opacity = '1';
    mainContainer.style.display = 'block';
    setTimeout(() => {
      footer.style.transition = '500ms';
      footer.style.opacity = '1';
      footer.style.display = 'block';
      !isMobile ? topNav.style.position = 'sticky' : null;
      if (cb) cb();

      if (topNav.getBoundingClientRect().top > 0 && window.scrollY == 0) {
        topNav.scrollIntoView({ behavior: 'smooth' });
      }
    }, 500);
  }, 100);
}

function clearHideContentTransition() {
  let mainContainer = document.querySelector('main');
  let footer = document.querySelector('footer');
  let topNav = document.querySelector('.top-nav');
  topNav.style.transition = '0s';
  mainContainer.style.transition = '0s';
  footer.style.transition = '0s';
}

function typingAnimation(el, text, index, cb) {
  let delay = 30;

  let char = text[index];
  if (char == ';') {
    el.innerHTML += '<br />$ ';
    !isMobile && keyPressAudio.play();
    delay += 400;
  } else if (char == ' ') {
    el.innerHTML += '&ensp;';
  } else {
    el.innerText += char;
  }
  
  if (index < text.length - 1) {
    setTimeout(() => typingAnimation(el, text, index + 1, cb), delay);
  } else {
    !isMobile && keyPressAudio.play();
    el.innerHTML += '<br />';
    setTimeout(() => {
      if (cb) cb();
      setTimeout(clearHideContentTransition, 1000);
    }, 600);
  }
}

function clearHeaderTerminal(cb) {
  let titleMobile = document.querySelector("#header-title-mobile > .text");
  let titleDesktop = document.querySelector('#header-title > .text');
  let footerCommandPrompt = document.querySelector('#footer-command-prompt');

  if (isMobile) {
    titleMobile.innerHTML = '';
  } else {
    titleDesktop.innerHTML = '';
  }

  blockUserScrolling();
  footerCommandPrompt.style.height = 'calc(100vh + 70px)';
  document.querySelector('.top-nav').style.position = 'relative';
  footerCommandPrompt.querySelector('.after-prompt').scrollIntoView({
    behavior: 'smooth',
  });

  setTimeout(() => {
    if (cb) cb();
    footerCommandPrompt.style.height = 'auto';
    unblockUserScrolling();
  }, 1000);
}

function headerTerminalExecute(desktopText, mobileText, cb) {
  window.scrollTo(0, 0);
  headerAnimationTerminated = false;
  let titleMobile = document.querySelector("#header-title-mobile > .text");
  let titleDesktop = document.querySelector('#header-title > .text');

  if (!mobileText) mobileText = desktopText;

  setTimeout(() => {
    if (isMobile) {
      titleMobile.insertAdjacentHTML('afterend', cursorHTML);
      typingAnimation(titleMobile, mobileText, 0, () => {
        if (cb) cb();
        headerAnimationTerminated = true;
        document.querySelector('#header-title-mobile .cursor').remove();
      });
    } else {
      titleDesktop.insertAdjacentHTML('afterend', cursorHTML);
      typingAnimation(titleDesktop, desktopText, 0, () => {
        if (cb) cb();
        headerAnimationTerminated = true;
        document.querySelector('#header-title .cursor').remove();
      });
    }
  }, 200);
}

document.addEventListener('DOMContentLoaded', function() {
  clearHeaderTerminal();
  hideContent();
  headerTerminalExecute(desktopText, mobileText, () => showContent(bindAllRelativeAnchors));
});