var cooldown = new Date();
const cooldownDuration = 50;
const debounceState = {
  left: null,
  right: null,
}
const imageSource = 'https://picsum.photos/';

document.addEventListener('DOMContentLoaded', start)

function start(){
  document.querySelector('.button.left').onclick = () => flow(-1)
  document.querySelector('.button.right').onclick = () => flow(1)
  // add scroll listener
  window.addEventListener('wheel', e => {
    if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
      flow(e.deltaY)
    } else {
      flow(e.deltaX)
    }
  })
  
  // add touch listener
  const swipeThreshold = 12
  document.querySelector('.shelf').addEventListener('touchstart', e => {
    var start = e.touches[0].clientX
    window.addEventListener('touchmove', touchMove)
    window.addEventListener('touchend touchcancel', touchEnd)
    
    function touchMove(e){
      const next = e.touches[0].clientX
      if (next > start + swipeThreshold) {
        flow(-1)
      } else if (next < start - swipeThreshold) {
        flow(1)
      }
      start = e.touches[0].clientX
    }
    function touchEnd(){
      window.removeEventListener('touchmove', touchMove)
      window.removeEventListener('touchend touchcancel', touchEnd)
    }
  });
  
  loadImages();
}

// add key listener
window.addEventListener('keydown', e => {
  switch(e.keyCode) {
    case 37:
      return animateClick('left', -1);
    case 39:
      return animateClick('right', 1);
    default:
      return;
  }
  
  // this function allows for the UI buttons to accurately
  // convey activity on keypress/hold
  function animateClick(selector, flowValue) {
    var btn = document.querySelector('.button.' + selector);

    // handle debounce
    if (debounceState[selector] !== null) {
      clearTimeout(debounceState[selector]);
      debounceState[selector] = null;
    }
    
    // renew active animation
    btn.classList.add('active');
    debounceState[selector] = setTimeout(() => {
      btn.classList.remove('active');
    }, cooldownDuration + 5);
    
    // init cover flow
    flow(flowValue);
  }
})

function flow(dir){
  // cooldown max 1 scroll per 50ms
  var timestamp = new Date()
  if (timestamp - cooldown > cooldownDuration){
    // reset cooldown
    cooldown = timestamp
    
    var l4,l3,l2,l1,c,r1,r2,r3,r4;
    // new center element
    if (dir < 0) {
      var c = document.querySelector('.l1')
    } else {
      var c = document.querySelector('.r1')
    }
    // bubbling assignment
    if (c) {
      l1 = c.previousSibling;
      r1 = c.nextSibling;
    }
    if (l1) l2 = l1.previousSibling;
    if (l2) l3 = l2.previousSibling;
    if (l3) l4 = l3.previousSibling;
    if (r1) r2 = r1.nextSibling;
    if (r2) r3 = r2.nextSibling;
    if (r3) r4 = r3.nextSibling;
    if (l4) l4.className = "book l4";
    if (l3) l3.className = "book l3";
    if (l2) l2.className = "book l2";
    if (l1) l1.className = "book l1";
    if (c) c.className = "book c";
    if (r1) r1.className = "book r1";
    if (r2) r2.className = "book r2";
    if (r3) r3.className = "book r3";
    if (r4) r4.className = "book r4";
  }
}

function loadImages(){
  let images = document.querySelectorAll('.shelf img.book');
  images.forEach(async function(img){
    let src = await fetchImage(400,600);
    if (src) {
      img.classList.remove('hidden');
      img.src = src;
      requestAnimationFrame(() => img.classList.add('fadein'));
    }
  });
}

async function fetchImage(width, height){
  try {
    const url = [imageSource, width, height].join('/');    
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`Response status: ${response.status}`);
    }
    return response.url;
  } catch(err) {
    console.error(err);
    return null;
  }
}