const DELTA       = 800;
const DURATION    = 8000;
const DESIRED_FPS = 60;

const DELTA_PER_FRAME = DELTA / (DURATION / (1000 / DESIRED_FPS));
const TIME_PER_FRAME  = 1000 / DESIRED_FPS;

const toArray   = Function.prototype.call.bind(Array.prototype.slice);
const textures  = toArray(document.getElementsByClassName('by-js'));
const texturesB = toArray(document.getElementsByClassName('by-css'));

const settingContainer = document.getElementById('setting');
const resultContainer  = document.getElementById('result');
const fpsContainer     = document.getElementById('fps');

let rafId, timerId, jankIntervalId;

function add(a, b) { return a + b; }
function sum(...nums) { return nums.reduce(add, 0); }
function ave(...nums) { return sum(...nums) / nums.length; }
function truncate(num) { return Math.floor(num * 100) / 100; }
function rand(min, max) { return Math.random() * (max - min) + min; }

function doAnimate(targets, useRaf = false) {
  const startTime = performance.now();
  const fpsLog    = [];

  let lapLatestTime = startTime;
  let lapDrawCount  = 0;
  let prevFrame     = 0;

  function fps(currentTime) {
    lapDrawCount++;
    if (currentTime - lapLatestTime > 300) {
      fpsLog.push((lapDrawCount / (currentTime - lapLatestTime) * 1000));
      lapLatestTime = currentTime;
      lapDrawCount = 0;
      fpsContainer.innerHTML = `Latest: ${truncate(fpsLog[fpsLog.length - 1])}`;
    }
  }

  function draw() {
    performance.mark('draw-s');
    const currentTime  = performance.now();
    const currentFrame = Math.floor((currentTime - startTime) / TIME_PER_FRAME);
    const currentDelta = Math.min(DELTA, currentFrame * DELTA_PER_FRAME);

    if (prevFrame !== currentFrame) {
      prevFrame = currentFrame;
      targets.forEach((target) => target.style.transform = `translateX(${currentDelta}px)`);
      fps(currentTime);
    }

    if (currentDelta < DELTA) {
      // timer と rAF 分岐
      if (useRaf) {
        rafId = requestAnimationFrame(draw);
      } else {
        timerId = setTimeout(draw, 1000 / DESIRED_FPS);
      }
    } else {
      // complete
      resultContainer.innerHTML = `Elapsed: ${truncate(currentTime - startTime)} ms`;
      fpsContainer.innerHTML += ` / Average: ${truncate(ave(...fpsLog))}`;
    }
    performance.mark('draw-e');
    performance.measure('draw', 'draw-s', 'draw-e');
  }

  draw();
}

function animateTextures(useRaf = false) {
  resetTextures();
  doAnimate(textures, useRaf);
  texturesB.forEach((texture) => {
    texture.style.transition = `transform ${DURATION / 1000}s linear`;
    texture.style.transform = `translateX(${DELTA}px)`;
  });
}

function resetTextures() {
  textures.forEach((texture) => texture.style.transform =null);
  texturesB.forEach((texture) => texture.style.transform = texture.style.transition = null);
  clearTimeout(timerId);
  cancelAnimationFrame(rafId);
}

// event listeners
document.getElementById('raf').addEventListener('click', () => animateTextures(true));
document.getElementById('timer').addEventListener('click', () => animateTextures());
document.getElementById('reset').addEventListener('click', () => resetTextures());

// css transition samples
document.getElementById('toggleCssSamples').addEventListener('click', (e) => {
  if (e.target.checked) {
    document.body.classList.add('enable-css-samples');
  } else {
    document.body.classList.remove('enable-css-samples');
  }
});

document.getElementById('toggleWillChange').addEventListener('click', (e) => {
  if (e.target.checked) {
    document.body.classList.add('enable-will-change');
  } else {
    document.body.classList.remove('enable-will-change');
  }
});

// jank provide
document.getElementById('toggleJank').addEventListener('click', (e) => {
  if (e.target.checked) {
    jankIntervalId = setInterval(jank, 4); // high frequency
  } else {
    clearInterval(jankIntervalId);
  }
});

function jank() {
  performance.mark('jank-s');
  const s = performance.now();
  const e = rand(8, 20); // busy time (ms)
  do {
    if (performance.now() - s > e) {
      break;
    }
  } while (true);
  performance.mark('jank-e');
  performance.measure('jank', 'jank-s', 'jank-e');
}

// show settings
settingContainer.innerHTML = `Delta: ${DELTA} px / Duration: ${DURATION} ms / Desired FPS: ${DESIRED_FPS}`;