/**
* @desc Basic linear value animation that can accept simple easing functions and provides update & complete callbacks
* @param  {Object} values - Object with numerical values. eg. { value1: 0, value2: 20, someKey: 55 }
* @param  {Number} duration - How long (in milliseconds) the animation will be
* @param  {Object} options - target values, update callback & complete callback
* @param  {Function} [options.onComplete=(values) => values] - Callback that fires once animation is complete
* @param  {Function} [options.onUpdate=(values) => values] - Callback that fires when animation frame updates
* @param  {Function} [options.ease=(t) => t] - easing method eg. https://gist.github.com/gre/1650294
* @example
 const a = document.getElementById('a')
 animateValues({ a: 0 }, 800, {
    a: 500,
    onUpdate: v => a.style.transform = 'scaleX('+ v.a +')',
    onComplete: v => alert('Done!'),
    ease: t => t<.5 ? 2*t*t : -1+(4-2*t)*t, // From: https://gist.github.com/gre/1650294 
  })
*/
function animateValues(values, duration, options) {
  // Linear interpolation
  const lerp = (source, target, amount) => source + amount * (target - source)
  
  // Validation methods
  const checkNum = n => typeof n === 'number' ? n : null
  const checkFunc = f => typeof f === 'function' ? f : _ => _
  
  // Ensure methods. 
  const onComplete = checkFunc(options.onComplete)
  const onUpdate = checkFunc(options.onUpdate)
  const ease = checkFunc(options.ease)
  
  // Animation start time
  const start = Date.now()
  
  // Create a map <key: [from, to]>
  const animationMap = Object.keys(values).reduce((map, key) => {
    const _from = checkNum(values[key])
    const _to = checkNum(options[key])
    if (_from !== null && _to !== null) map[key] = [_from, _to]
    return map
  }, {})
  
  // List of animating values
  const keys = Object.keys(animationMap)
  
  // Create & run animation function
  const animation = () => {
    const now = Date.now()
    let t = duration > 0 ? (now - start) / duration : 1
    
    // Update all values using 't'
    keys.forEach(key => {
      // If both 'from' and 'to' are numbers: animate!
      const [_from, _to] = animationMap[key]
      const progress = ease(t, _from, _to, duration)
      // Update value
      values[key] = lerp(_from, _to, progress)
    })
    
    // If complete..
    if (t >= 1) {
      // Final update for all keys
      keys.forEach(key => (values[key] = options[key]))
      onUpdate(values)
      onComplete(values)
    } else {
      // Run update callback and loop until finished
      onUpdate(values)
      requestAnimationFrame(animation)
    }
  }
  animation()
}

// https://gist.github.com/gre/1650294
/*
 * Easing Functions - inspired from http://gizma.com/easing/
 * only considering the t value for the range [0, 1] => [0, 1]
 */
const EasingFunctions = {
  // no easing, no acceleration
  linear: function (t) { return t },
  // accelerating from zero velocity
  easeInQuad: function (t) { return t*t },
  // decelerating to zero velocity
  easeOutQuad: function (t) { return t*(2-t) },
  // acceleration until halfway, then deceleration
  easeInOutQuad: function (t) { return t<.5 ? 2*t*t : -1+(4-2*t)*t },
  // accelerating from zero velocity 
  easeInCubic: function (t) { return t*t*t },
  // decelerating to zero velocity 
  easeOutCubic: function (t) { return (--t)*t*t+1 },
  // acceleration until halfway, then deceleration 
  easeInOutCubic: function (t) { return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1 },
  // accelerating from zero velocity 
  easeInQuart: function (t) { return t*t*t*t },
  // decelerating to zero velocity 
  easeOutQuart: function (t) { return 1-(--t)*t*t*t },
  // acceleration until halfway, then deceleration
  easeInOutQuart: function (t) { return t<.5 ? 8*t*t*t*t : 1-8*(--t)*t*t*t },
  // accelerating from zero velocity
  easeInQuint: function (t) { return t*t*t*t*t },
  // decelerating to zero velocity
  easeOutQuint: function (t) { return 1+(--t)*t*t*t*t },
  // acceleration until halfway, then deceleration 
  easeInOutQuint: function (t) { return t<.5 ? 16*t*t*t*t*t : 1+16*(--t)*t*t*t*t },
  // elastic bounce effect at the beginning
  easeInElastic: function (t) { return (.04 - .04 / t) * Math.sin(25 * t) + 1 },
  // elastic bounce effect at the end
  easeOutElastic: function (t) { return .04 * t / (--t) * Math.sin(25 * t) },
  // elastic bounce effect at the beginning and end
  easeInOutElastic: function (t) { return (t -= .5) < 0 ? (.01 + .01 / t) * Math.sin(50 * t) : (.02 - .01 / t) * Math.sin(50 * t) + 1 }
}


// ----- EXAMPLE ------

const a = document.getElementById('a')
const b = document.getElementById('b')
const c = document.getElementById('c')
const d = document.getElementById('d')
const e = document.getElementById('e')
const f = document.getElementById('f')
const g = document.getElementById('g')

const v = { 
  a: 1, 
  b: 1,
  c: 1,
  d: 1,
  e: 1,
  f: 1,
  g: 1,
}

const duration = 2000

const easeKeys = Object.keys(EasingFunctions)

setInterval(() => {
  const easeKey = easeKeys[Math.floor(Math.random() * easeKeys.length)]
  animateValues(v, duration, {
    a: Math.random() * 500,
    b: Math.random() * 500,
    c: Math.random() * 500,
    d: Math.random() * 500,
    e: Math.random() * 500,
    f: Math.random() * 500,
    g: Math.random() * 500,
    onUpdate: () => {
      a.style.transform = 'scaleX('+ v.a +')'
      b.style.transform = 'scaleX('+ v.b +')'
      c.style.transform = 'scaleX('+ v.c +')'
      d.style.transform = 'scaleX('+ v.d +')'
      e.style.transform = 'scaleX('+ v.e +')'
      f.style.transform = 'scaleX('+ v.f +')'
      g.style.transform = 'scaleX('+ v.g +')'
    },
    onComplete: () => {
      console.log(easeKey)
    },
    ease: EasingFunctions[easeKey],
  })
  
}, duration)