const startBtn = document.getElementById("startBtn");
const stopBtn = document.getElementById("stopBtn");
const svg = document.getElementById("look-at-snow");
svg.w = svg.getAttribute("width");
svg.h = svg.getAttribute("height");

// Calcul de la distance
const range = (min, max) => max - min;
// Random
const random = (min, max) => Math.random() * (max - min) + min;

// transformations
const transform = (progress, { start, end }) =>
  start + progress * range(start, end);
// timing functions
const tfn = {
  easeOutCubic: t => Math.pow(t - 1, 3) + 1,
  easeInCubic: t => Math.pow(t, 3),
  easeInQuad: t => t * t,
  easeOutQuad: t => t * (2 - t),
  parabolic: t => -4 * Math.pow(t, 2) + 4 * t
};

const animePupil = (function() {
  let rafID = null;
  let f = 0;
  let dir = 1;
  let replay;
  let max;

  const NF = 40;
  const pupil = document.getElementById("pupil");
  const iris = document.getElementById("iris");

  const maxRandom = () => {
    max = Math.round(Math.random() * NF);
  };

  const animDatas = {
    iris: {
      translateX: { start: -23, end: 23 },
      translateY: { start: 0, end: -7 },
      rx: { start: 18, end: 22 }
    },
    pupil: {
      translateX: { start: -26, end: 26 },
      translateY: { start: 0, end: -8 },
      rx: { start: 6, end: 8 }
    }
  };

  const frame = () => {
    f += dir;
    const progress = f / NF;
    // const ease = (dir-1) ? tfn.easeInCubic(progress) : tfn.easeOutCubic(progress);
    const ease = progress;
    const parabolic = tfn.parabolic(ease);

    // Transform Iris
    iris.setAttribute(
      "transform",
      `translate(
                ${transform(ease, animDatas.iris.translateX)}
                ${transform(parabolic, animDatas.iris.translateY)}
            )`
    );
    iris.setAttribute("rx", transform(parabolic, animDatas.iris.rx));

    // Transform pupil
    pupil.setAttribute(
      "transform",
      `translate( 
                ${transform(ease, animDatas.pupil.translateX)}
                ${transform(parabolic, animDatas.pupil.translateY)}
            )`
    );
    pupil.setAttribute("rx", transform(parabolic, animDatas.pupil.rx));

    if (f === max || !(f % NF)) {
      dir *= -1;
      stop();
      replay = setTimeout(() => {
        play();
      }, random(2000, 4500));
      return;
    }

    rafID = requestAnimationFrame(frame);
  };
  const play = () => {
    if (rafID) return;
    maxRandom();
    rafID = requestAnimationFrame(frame);
  };
  const stop = () => {
    clearTimeout(replay);
    cancelAnimationFrame(rafID);
    rafID = null;
  };
  return {
    play: play,
    stop: stop
  };
})();

const animeEyelids = (function() {
  let rafID = null;
  let f = 0;
  let replay;

  const NF = 20;
  const eyeLids = document.getElementById("eyeShape");
  // Path coordinates
  const animDatas = {
    open: [40, 52, 75, 52, 120, 75, 120, 75, 105, 93, 75, 93, 27, 75, 27, 75],
    close: [40, 93, 75, 93, 120, 75, 120, 75, 105, 93, 75, 93, 27, 75, 27, 75]
  };

  const frame = () => {
    f += 1;
    const progress = f / NF;
    const parabolic = tfn.parabolic(progress);

    const path = animDatas.open.map((start, index) => {
      const datas = {
        start: start,
        end: animDatas.close[index]
      };
      const point = transform(parabolic, datas);
      return point;
    });

    eyeLids.setAttribute("d", `M 27 75 S ${path.join(" ")} z`);

    if (!(f % NF)) {
      stop();
      replay = setTimeout(() => {
        play();
      }, random(1500, 10000));
      return;
    }

    rafID = requestAnimationFrame(frame);
  };
  const play = () => {
    if (rafID) return;
    rafID = requestAnimationFrame(frame);
  };
  const stop = () => {
    f = 0;
    clearTimeout(replay);
    cancelAnimationFrame(rafID);
    rafID = null;
  };
  return {
    play: play,
    stop: stop
  };
})();

// snowflake animation
const animeSnow = (function() {
  let rafID = null;

  const randomInterval = (callback, min, max) => {
    let NF = Math.round(random(min, max));
    let f = 0;

    const frame = () => {
      f += 1;
      if (f >= NF) {
        NF = random(min, max);
        f = 0;
        callback();
      }
      rafID = requestAnimationFrame(frame);
    };
    rafID = requestAnimationFrame(frame);
  };

  const newFlake = () => {
    // console.log('create new flake');
    const flake = document.createElementNS("http://www.w3.org/2000/svg", "use");
    flake.setAttributeNS("http://www.w3.org/1999/xlink", "href", "#snowflake");

    flake.setAttribute("x", Math.round(random(0, svg.w)));
    flake.setAttribute('y', -22);
    flake.style.strokeWidth = `${random(0.5, 2)}px`;

    return flake;
  };

  const animeFlake = () => {
    let flake = newFlake();
    let f = 0;
    const NF = 800;

    const animeDatas = {
      translateY : { start: 0, end: 540 },
      rotate : { start: 0, end: 100 }
    };

    const frame = () => {
      f += 1;
      const progress = f/NF;
      const ease = tfn.easeOutCubic(progress);

      flake.setAttribute(
        'transform',
        `translate(
            0
            ${transform(ease, animeDatas.translateY)}
          ) rotate(
            ${transform(ease, animeDatas.rotate)}
          )`
      );

      if ( !(f%NF) ) {    
        svg.removeChild(flake);
        return;
      }

      requestAnimationFrame(frame); 
    };

    svg.appendChild(flake);
    requestAnimationFrame(frame);
  };

  const play = () => {
    if (rafID) return;
    randomInterval(animeFlake, 20, 35);
  };

  const stop = () => {
    cancelAnimationFrame(rafID);
    rafID = null;
  };

  return {
    play: play,
    stop: stop
  };
})();

startBtn.addEventListener(
  "click",
  () => {
    animePupil.play();
    animeEyelids.play();
    animeSnow.play();
  },
  false
);

stopBtn.addEventListener(
  "click",
  () => {
    animePupil.stop();
    animeEyelids.stop();
    animeSnow.stop();
  },
  false
);