// M0,40 C16,40
// M5,20 C16,35
// M10,0 C16,30
//  a b      c
// a  0 - 10
// b 40 -  0
// c 40 - 30

const endOfPath = '50,40 80,40 L300,40';

const aStart = 0;
const aEnd = 10;

const bStart = 40;
const bEnd = 0;

const cStart = 40;
const cEnd = 30;

const aStep = 1.1;
const bStep = -4 * aStep;
const cStep = -aStep;

let a = aStart;
let b = bStart;
let c = cStart;

const kicker = document.querySelector('.KickInput-kicker');
const input = document.querySelector('.KickInput-input');

const FRAME_DURATION = 16.66; // 60fps
// If available we are using native "performance" API instead of "Date"
// Read more about it on MDN:
// https://developer.mozilla.org/en-US/docs/Web/API/Performance
const getTime = typeof performance === 'function' ? performance.now : Date.now;

// Initial time
let lastUpdate = null;

let direction = 1;

let stop = false;

function animate() {
  const now = getTime();
  // This is the main part
  // We are checking how much time has passed since the last update
  // and translating that to frames
  const delta = (now - lastUpdate) / FRAME_DURATION;

  // Updating scene logic
  a += aStep * delta * direction;
  b += bStep * delta * direction;
  c += cStep * delta * direction;
  
  if (a > aEnd) {
    // Reverse direction
    direction = -1;
    a = aEnd;
    b = bEnd;
    c = cEnd;
  } else if (a < aStart && direction === -1) { 
    // Stop animation
    stop = true;
    direction = 1;
    a = aStart;
    b = bStart;
    c = cStart;
  }

  // Render updated scene
  kicker.setAttribute('d', `M${ a },${ b } C16,${ c } ${ endOfPath }`);
  
  // Update last updated time
  lastUpdate = now;

  if (!stop) {
    requestAnimationFrame(animate);
  }
}

input.addEventListener('focus', () => {
  lastUpdate = getTime();
  stop = false;
  
  if (input.value.trim() === '') {
    animate();
  }
});

input.addEventListener('blur', () => {
  if (input.value.trim() === '') {
    input.setAttribute('class', 'KickInput-input');
  } else {
    input.setAttribute('class', 'KickInput-input KickInput-input--hasValue');
  }
});