import { animate } from "https://cdn.skypack.dev/@okikio/animate";
import { methodCall } from "https://cdn.skypack.dev/@okikio/manager";

/* Properties Section */
// Motion Paths Demo
let playbackFn = (containerSel, anims) => {
  let playstateEl = document.querySelector(`${containerSel} #playstate-toggle`);
  let progressEl = document.querySelector(`${containerSel} #progress`);

  let progressOutputEl = document.querySelector(
    `${containerSel} #progress-output`
  );
  let oldState: AnimationPlayState;

  let updatePlayState = () => {
    oldState = anims[0].getPlayState();
    playstateEl.setAttribute("data-playstate", oldState);
  };

  anims[0].on("finish begin", updatePlayState).on("update", (progress) => {
    progressEl.value = `` + progress.toFixed(2);
    progressOutputEl.textContent = `${Math.round(progress)}%`;
  });

  playstateEl.addEventListener("click", () => {
    if (anims[0].is("running")) methodCall(anims, "pause");
    else if (anims[0].is("finished")) methodCall(anims, "reset");
    else methodCall(anims, "play");

    updatePlayState();
  });

  progressEl.addEventListener("input", (e) => {
    let percent = +progressEl.value;
    methodCall(anims, "pause");
    methodCall(anims, "setProgress", percent);
  });

  progressEl.addEventListener("change", () => {
    oldState !== "paused"
      ? methodCall(anims, "play")
      : methodCall(anims, "pause");

    updatePlayState();
  });
};

(() => {
  let options: IAnimationOptions = {
    padEndDelay: true,
    easing: "linear",
    duration: 2000,
    loop: 4,
    speed: 1
  };
  let containerSel = ".motion-path-demo";
  let el = document.querySelector(".motion-path .el-1") as HTMLElement;
  let motionPath = animate({
    target: el,
    offsetDistance: ["0%", "100%"],
    ...options
  });

  let path = document.querySelector(".motion-path path");
  let el2 = document.querySelector(".motion-path .el-2");

  let pts = new Set();
  let rotateArr = [];
  let len = path.getTotalLength();

  let ptAtZero = path.getPointAtLength(0);
  for (var i = 0; i < len; i++) {
    let { x, y } = path.getPointAtLength(i);
    pts.add([x, y]);

    let { x: x0, y: y0 } = i - 1 >= 1 ? path.getPointAtLength(i - 1) : ptAtZero;
    let { x: x1, y: y1 } = i + 1 >= 1 ? path.getPointAtLength(i + 1) : ptAtZero;
    let calc = +((Math.atan2(y0 - y1, x0 - x1) * 180) / Math.PI);
    rotateArr.push(calc);
  }

  let getTotalLength = animate({
    target: el2,
    translate: [...pts],
    rotate: rotateArr,
    fillMode: "both",
    ...options
  });

  playbackFn(containerSel, [motionPath, getTotalLength]);
})();