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

/* Properties Section */
// Timing Options (Callback/Function Type) Demo
let containerSel = ".timing-options-demo";

let finishEl = document.querySelector("#finish");
let delayEl = document.querySelector("#delay");
let durationEl = document.querySelector("#duration");
let endDelayEl = document.querySelector("#endDelay");
let speedEl = document.querySelector("#speed");
let loopEl = document.querySelector("#loop");
let easingEl = document.querySelector("#easing");
let directionEl = document.querySelector("#direction");
// let fillModeEl = document.querySelector("#fillMode");

let delayOutputEl = document.querySelector("#delay-output");
let durationOutputEl = document.querySelector("#duration-output");
let endDelayOutputEl = document.querySelector("#endDelay-output");
let speedOutputEl = document.querySelector("#speed-output");
let loopOutputEl = document.querySelector("#loop-output");

let delayValue = delayEl.value;
let durationValue = durationEl.value;
let endDelayValue = endDelayEl.value;
let speedValue = speedEl.value;
let loopValue = loopEl.value;
let easingValue = easingEl.value;
let directionValue = directionEl.value;
// let fillModeValue = fillModeEl.value;

durationOutputEl.textContent = durationValue;
endDelayOutputEl.textContent = endDelayValue;
speedOutputEl.textContent = speedValue;
loopOutputEl.textContent = loopValue;
delayOutputEl.textContent = delayValue;

durationEl.addEventListener("input", (e) => {
  durationValue = durationEl.value;
  durationOutputEl.textContent = durationValue;
});

delayEl.addEventListener("input", (e) => {
  delayValue = delayEl.value;
  delayOutputEl.textContent = delayValue;
});

speedEl.addEventListener("input", (e) => {
  speedValue = speedEl.value;
  speedOutputEl.textContent = speedValue;
});

loopEl.addEventListener("input", (e) => {
  loopValue = loopEl.value;
  loopOutputEl.textContent = loopValue;
});

endDelayEl.addEventListener("input", (e) => {
  endDelayValue = endDelayEl.value;
  endDelayOutputEl.textContent = endDelayValue;
});

easingEl.addEventListener("input", (e) => {
  easingValue = easingEl.value;
});

directionEl.addEventListener("input", (e) => {
  directionValue = directionEl.value;
});

// fillModeEl.addEventListener("input", (e) => {
//   fillModeValue = fillModeEl.value;
// });

let container = document.querySelector(containerSel);
container.addEventListener("click", () => {
  finishEl.style.opacity = "0";
  delayValue = delayEl.value;
  durationValue = durationEl.value;
  endDelayValue = endDelayEl.value;
  speedValue = speedEl.value;
  loopValue = loopEl.value;
  easingValue = easingEl.value;
  directionValue = directionEl.value;
  // fillModeValue = fillModeEl.value;

  animate({
    target: `${containerSel} .el`,

    opacity(index, total, element) {
      console.log(element);
      return [0, Math.min((index + 1 + 0.2) / total, 1)];
    },
    transform: ["translateX(0px)", "translateX(250px)"],

    duration: (i) => (i + 1) * +durationValue,
    speed: +speedValue, // Speed can be a function; but in this situation its understand the animation if speed isn't a function
    endDelay: (i) => (i + 1) * +endDelayValue,
    delay: (i) => (i + 1) * +delayValue,
    loop: (i) => (+loopValue == 1 ? +loopValue : (i + 1) * +loopValue),
    fillMode: "both",

    // I feel these shouldn't be functions for your understanding
    direction: directionValue,
    easing: easingValue,
    autoplay: true
  }).on("finish", () => {
    finishEl.style.opacity = "1";
  });
});