import {
  SpringEasing,
  CSSSpringEasing,
  SpringOutFrame
} from "https://esm.sh/spring-easing";

import gsap from "https://esm.sh/gsap";
import anime from "https://esm.sh/animejs";

import * as React from "https://esm.sh/react";
import * as ReactDOM from "https://esm.sh/react-dom";
import { motion } from "https://esm.sh/framer-motion";

import { animate as motionone } from "https://esm.sh/motion";
import { animate } from "https://esm.sh/@okikio/animate";

// Note: this is the return value of {@link SpringEasing} and {@link GenerateSpringFrames}, you don't need the object to get this format
let [translateX, duration] = SpringEasing([0, 250], {
  easing: "spring-out(1, 100, 10, 0)",
  // You can change the size of Array for the SpringEasing function to generate
  numPoints: 200,
  // The number of decimal places to round, final values in the generated Array
  // This option doesn't exist on {@link GenerateSpringFrames}
  decimal: 5
});

// Round the duration manually, to fix bug with different animation libraries rounding the duration differently
duration = Math.round(duration);

// Rotate
let [rotate] = SpringEasing([0, 360], {
  easing: [SpringOutFrame, 1, 100, 10, 0],

  // You can change the size of Array for the SpringEasing function to generate
  numPoints: 200
});

let [easings] = CSSSpringEasing({
  easing: [SpringOutFrame, 1, 100, 10, 0],

  // You can change the size of Array for the SpringEasing function to generate
  numPoints: 200
});

const cssLinearEasingBox = document.querySelector(".linear-easing-css .box");
cssLinearEasingBox.style.setProperty("--spring-duration", `${duration}ms`);
cssLinearEasingBox.style.setProperty("--spring-easing", `linear(${easings})`);
cssLinearEasingBox.style.setProperty("animation-play-state", "running");

// Not all browsers support linear(...) easing yet
try {
  document.querySelector(".linear-easing-waapi .box").animate(
    {
      translate: ["0", "250px"],
      rotate: ["0", "360deg"]
    },
    {
      // TIP... Use linear easing for the proper effect
      easing: `linear(${easings})`,

      // The optimal duration for this specific spring
      duration,

      iterations: Infinity,
      direction: "alternate"
    }
  );
} catch (e) {
  console.warn(e.toString());
}

let wrappedX = gsap.utils.wrap(translateX);
let wrappedRotate = gsap.utils.wrap(rotate);
gsap.fromTo(
  ".gsap .box",
  { x: 0, rotation: 0 },
  {
    duration: duration / 1000,
    ease: "none",
    x: translateX.length,
    rotation: rotate.length,
    modifiers: {
      x: (x) => wrappedX(parseFloat(x)) + "px",
      rotation: (x) => wrappedRotate(parseFloat(x)) + "deg"
    },
    yoyo: true,
    repeat: -1
  }
);

anime({
  targets: ".animejs .box",

  // Using spring easing animate from [0 to 250] using `spring-out-in`
  translateX,
  // You can set the easing without an object
  rotate,
  // TIP... Use linear easing for the proper effect
  easing: "linear",

  // The optimal duration for this specific spring
  duration,

  loop: true,
  direction: "alternate"
});

let transform = rotate.map(
  (x, i) => `translateX(${translateX[i]}px) rotate(${rotate[i]}deg)`
);

document.querySelector(".waapi .box").animate(
  {
    transform
  },
  {
    // TIP... Use linear easing for the proper effect
    easing: "linear",

    // The optimal duration for this specific spring
    duration,

    iterations: Infinity,
    direction: "alternate"
  }
);

function Box() {
  return (
    <motion.div
      className="box"
      animate={{
        x: translateX,
        rotate
      }}
      transition={{
        // TIP... Use linear easing for the proper effect
        easing: "linear",
        duration: duration / 1000,

        repeat: Infinity,
        repeatType: "reverse"
      }}
    ></motion.div>
  );
}

ReactDOM.render(<Box />, document.querySelector(".framer-motion #root"));

motionone(
  document.querySelector(".motion-one .box"),
  {
    transform
  },
  {
    // TIP... Use linear easing for the proper effect
    easing: "linear",

    // The optimal duration for this specific spring
    duration: duration / 1000,

    repeat: Infinity,
    direction: "alternate"
  }
);

animate({
  targets: ".okikio_animate .box",

  // Using spring easing animate from [0 to 250] using `spring-out-in`
  translateX,
  // You can set the easing without an object
  rotate,
  // TIP... Use linear easing for the proper effect
  easing: "linear",

  // The optimal duration for this specific spring
  duration,

  loop: true,
  direction: "alternate"
});