// Get started!
const RANGE = document.querySelector('input');
const CONTAINER = document.querySelector('.container');
const TITLES = [...document.querySelectorAll('h1')];
const BLURBS = [...document.querySelectorAll('p')];
const CODES = [...document.querySelectorAll('pre')];

// Each config reps delay, duration, stagger, coefficient, offset
const STEP_CONFIGS = [
[0, 0.9, 0, 1, 0],
[2, 0.9, 0, 1, 0],
[-0.5, 0.9, 0, 1, 0],
[0, 0.9, 0.15, 1, 0],
[0, 0.9, 0.15, 1, -5],
[0, 0.9, 0.15, 1, 0],
[0, 0.9, 0.15, -1, 0]];


const update = () => {
  // Show/Hide elements
  for (let e = 0; e < TITLES.length; e++) {
    TITLES[e].style.display = BLURBS[e].style.display = CODES[e].style.display =
    e === parseInt(RANGE.value, 10) ? 'block' : 'none';
  }
  // Running the step function
  const CONFIG = STEP_CONFIGS[parseInt(RANGE.value, 10)];
  document.documentElement.style.setProperty('--delay', CONFIG[0]);
  document.documentElement.style.setProperty('--duration', CONFIG[1]);
  document.documentElement.style.setProperty('--stagger-step', CONFIG[2]);
  document.documentElement.style.setProperty('--coefficient', CONFIG[3]);
  document.documentElement.style.setProperty('--offset', CONFIG[4]);
  if (parseInt(RANGE.value, 10) === 5) {
    CONTAINER.classList.add('reversed');
  } else {
    CONTAINER.classList.remove('reversed');
  }
  // Retrigger the animation
  CONTAINER.hidden = true;
  requestAnimationFrame(() => CONTAINER.hidden = false);
};

RANGE.addEventListener('change', update);
// Run the first time to show step 0 👍
update();