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 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 = 'block';

  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';
      if (cb) cb();
    }, 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 = '';
  }

  footerCommandPrompt.style.height = 'calc(100vh)';
  hideTopNav();
  footerCommandPrompt.querySelector('.after-prompt').scrollIntoView({
    behavior: 'smooth',
  });

  setTimeout(() => {
    if (cb) cb();
    footerCommandPrompt.style.height = 'auto';
  }, 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));
});