const duration = 750;

let animationFrameId = 0;

function draw() {
  cancelAnimationFrame(animationFrameId);
  
  const endValue = (15 + Math.random() * 75).toFixed(1);
  document.querySelector('figure').innerHTML = `
    <div class="circle-meter">
      <p class="circle-meter__text">
        <span class="circle-meter__percent" id="meter-label">
          <!--
            For screen reader users we hide the animated value,
            because it could be noisy and overwhelming.
            We expose the end value
          -->
          <span class="u-visually-hidden">${endValue}%</span>
          <span aria-hidden="true"><span class="animated-count">0</span>%</span>
        </span>
      </p>
      <!-- I'm exposing this as a meter element, but I'm not sure if that's the best experience or not.  -->
      <svg
           width="100"
           height="100"
           viewBox="0 0 100 100"
           class="circle-meter__gauge"
           role="meter"
           aria-labelledby="meter-label"
           aria-valuemin="0"
           aria-valuemax="100"
           aria-valuenow="${endValue}"
      >
        <circle
                cx="50"
                cy="50"
                class="circle-meter__circle"
                style="--percent: ${endValue}"
        />
      </svg>
    </div>
  `;
  
  if(window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
    document.querySelector('.animated-count').textContent = endValue;
    return;
  }
  
  // Our start time (to determine where we are in the animation)
  const startTime = performance.now();
  // An array of the values that we'll be iterating through and displaying
  // e.g. [1, 2, 3, ... 73, 74, 74.1, 74.2, 74.3]
  const animationStates = determineAnimationStates(endValue);
  
  function animate() {
    // Compare our current time with our start time
    let elapsedTime = performance.now() - startTime;

    // If we've exceeded our duration, pretend we're right at the end of the
    // animation.
    if (elapsedTime > duration) {
      elapsedTime = duration;
    }

    // See how far we are compared to the total duration
    const percentComplete = elapsedTime / duration;
    // Use that value to select a frame to display
   
    document.querySelector('.animated-count').textContent = animationStates[
        Math.round(percentComplete * (animationStates.length - 1))
      ]

    // If we haven't hit the end of our animation, queue up another frame
    if (elapsedTime < duration) {
      animationFrameId = requestAnimationFrame(animate);
    }
  }
  
  animationFrameId = requestAnimationFrame(animate);
}

draw();

document.querySelector('button').addEventListener('click', draw)


/**
 * Determines all of the animation frames necessary to animate from 0 to another
 * number.
 *
 * This function allows for up to one level of decimal point precision.
 * However, decimals are only displayed for the final integer in the animation.
 *
 * For example, if we're animating to 74.3, our returned array would look like this:
 * [1, 2, 3, ... 73, 74, 74.1, 74.2, 74.3]
 *
 * This is because if we displayed every decimal along the way we'd end up with
 * an order of magnitude more animation states. If we tried to animate that in
 * a short time frame it would be more animation frames than a human could observe.
 * (e.g. trying to display 743 frames in 750 milliseconds)
 */
export function determineAnimationStates(endValue) {
  const animationStates = [];

  // Get our number rounded down
  const roundedValue = Math.floor(endValue);
  // Get every integer between 1 and our rounded down number
  // [1, 2, 3, ... 73, 74]
  for (let i = 1; i <= roundedValue; i++) {
    animationStates.push(i);
  }

  // Determine whether there's anything in the first decimal place for us to
  // worry about
  const remainder = parseFloat((endValue - roundedValue).toFixed(2));

  // Iterate over our first decimal place, adding the final decimal states
  // [..., 74.1, 74.2, 74.3]]
  if (remainder) {
    // Originally my loop looked like this:
    // `for (let i = 0.1; i <= 0.3; i += 0.1) {}`
    // This was buggy due to floating point precision in JS (0.2 + 0.1 = 0.30000000000000004)
    // Using integers instead of decimals makes the code a bit more complex
    // but fixes this.
    for (let i = 1; i <= remainder * 10; i += 1) {
      animationStates.push(roundedValue + i / 10);
    }
  }

  return animationStates;
}