const easing = {
  easeInCubic: t => t ** 3,
  easeOutCubic: t => (--t) * t ** 2 + 1,
  easeInOutCubic: t => t < 0.5 ? 4 * t ** 3 : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1
};

let flag;
const $phone = document.querySelector('.phone');
const $content = document.querySelector('.content');
const $card = document.querySelector('#card');
const $circle = document.querySelector('#circle');
const $progress = document.querySelector('#progress');
let trigger;
let release;

const getClientY = e => {
  return parseInt(e.clientY || e.changedTouches[0].clientY, 10);
};

const dragStartListener = e => {
  const y = getClientY(e);
  const edge = $phone.offsetTop;
  if (y > edge && y < edge + 44) {
    resetAnimation();
    flag = true;
    trigger = y + 100;
    release = y + 200;
  }
};

const dragListener = e => {
  if (flag) {
    const y = getClientY(e);
    const size = 100 - (trigger - y);
    setCardPath(size, size);
    setContentStyle(size, 1 - (size / 100));
    if (y >= trigger) {
      setCardPath(Math.min(size, 100), size);
      if (y >= release) {
        flag = false;
        removeEventListeners();
        startBounceAnimation();
        $circle.classList.add('animated');
        setTimeout(() => startProgressAnimation(), 500);
      }
    }
  }
};

const dragEndListener = e => {
  if (flag) {
    flag = false;
    startCloseAnimation(100 - (trigger - getClientY(e)));
  }
};

const addEventListeners = () => {
  document.addEventListener('touchstart', dragStartListener);
  document.addEventListener('mousedown', dragStartListener);

  document.addEventListener('touchmove', dragListener);
  document.addEventListener('mousemove', dragListener);

  document.addEventListener('touchend', dragEndListener);
  document.addEventListener('mouseup', dragEndListener);
};

const removeEventListeners = () => {
  document.removeEventListener('touchstart', dragStartListener);
  document.removeEventListener('mousedown', dragStartListener);

  document.removeEventListener('touchmove', dragListener);
  document.removeEventListener('mousemove', dragListener);

  document.removeEventListener('touchend', dragEndListener);
  document.removeEventListener('mouseup', dragEndListener);
};

const resetAnimation = () => {
  setCardPath(0, 0);
  setContentStyle(0, 1);
  setProgressPath(0);
  $circle.classList.remove('animated');
  $progress.classList.remove('animated');
};

const setContentStyle = (y, opacity) => {
  $content.style.top = `${y}px`;
  $content.style.opacity = opacity;
}

const setCardPath = (y1, y2) => {
  var d = "M360,480 H0 V" + y1 + " Q180," + y2 + " 360," + y1;
  $card.setAttribute('d', d);
};

const setProgressPath = percent => {
  const x = 25 * Math.cos(percent * 6.283185);
  const y = 25 * Math.sin(percent * 6.283185);
  const largeArcFlag = percent <= 0.5 ? 0 : 1;
  const d = "M25,0 A25,25 0 " + largeArcFlag + " 1 " + x + "," + y;
  $progress.setAttribute('d', d);
};

const startBounceAnimation = () => {
  let start;
  const duration = 1250;

  const animation = timestamp => {
    if (!start) {
      start = timestamp;
    }

    const progress = timestamp - start;
    const amplitude = 100 - easing.easeOutCubic(progress / duration) * 100;
    const time = 3 * (progress / duration);
    const y = amplitude * Math.cos(6.283185 * time);
    setCardPath(100, 100 + y);

    if (progress < duration) {
      requestAnimationFrame(animation);
    }
  };

  requestAnimationFrame(animation);
}

const startProgressAnimation = () => {
  let start;
  const duration = 1000;

  const animation = timestamp => {
    if (!start) {
      start = timestamp;
    }

    const progress = timestamp - start;
    const percent = easing.easeInOutCubic(progress / duration);
    setProgressPath(percent);

    if (progress < duration) {
      requestAnimationFrame(animation);
    } else {
      $card.classList.add('animated');
      $progress.classList.add('animated');
      window.setTimeout(() => startCloseAnimation(), 250);
    }
  };

  requestAnimationFrame(animation);
}

const startCloseAnimation = (position = 100) => {
  let start;
  const duration = 1000;

  const animation = timestamp => {
    if (!start) {
      start = timestamp;
    }

    const progress = timestamp - start;
    const y = position - easing.easeInOutCubic(progress / duration) * position;
    setCardPath(y, y);
    setContentStyle(y, 1 - (y / 100));

    if (progress < duration) {
      requestAnimationFrame(animation);
    } else {
      addEventListeners();
    }
  };

  requestAnimationFrame(animation);
}

addEventListeners();