import React from "https://cdn.skypack.dev/react";
import ReactDOM from "https://cdn.skypack.dev/react-dom";
import gsap from "https://cdn.skypack.dev/gsap";

gsap.registerPlugin(InertiaPlugin);
gsap.registerPlugin(Observer);

const KNOCK = new Audio('https://assets.codepen.io/605876/pinball-knock.mp3')
const ROOT_NODE = document.querySelector("#app");

const SlideySlider = ({
  id,
  min = 0,
  max = 100,
  step = 1,
  value = 0,
  bump = 10,
}) => {
  const inputRef = React.useRef(null);
  const tweenRef = React.useRef(null);

  React.useEffect(() => {
    const TRACKER = InertiaPlugin.track(inputRef.current, "value")[0];
    const WRAP = gsap.utils.wrapYoyo(min, max);
    Observer.create({
      target: inputRef.current,
      type: "touch,pointer",
      dragMinimum: 3,
      onPress: () => tweenRef.current && tweenRef.current.kill(),
      onDragEnd: () => {
        let lastCycle = 0;
        tweenRef.current = gsap.to(inputRef.current, {
          inertia: {
            resistance: 200,
            value: "auto"
          },
          modifiers: {
            value: (v) => {
              const cycle = Math.floor(v / max);

              if (cycle !== lastCycle) {
                // Bounce!!!
                const vx = TRACKER.get("value");
                const xPercent = gsap.utils.clamp(
                  -bump,
                  bump,
                  gsap.utils.mapRange(-600, 600, -bump, bump, vx)
                );
                const duration = gsap.utils.clamp(
                  0.05,
                  0.2,
                  gsap.utils.mapRange(0, 600, 0.2, 0.05, Math.abs(vx))
                );
                const volume =
                  gsap.utils.clamp(
                    0.1,
                    1,
                    gsap.utils.mapRange(0, 600, 0, 1, Math.abs(vx))
                  )
                gsap.to(inputRef.current, {
                  onStart: () => {
                    KNOCK.pause()
                    KNOCK.currentTime = 0
                    KNOCK.volume = volume
                    KNOCK.play()
                  },
                  xPercent,
                  duration,
                  yoyo: true,
                  repeat: 1
                });
              }
              // Update the cycle count
              lastCycle = cycle;
              return WRAP(v);
            }
          }
        });
      }
    });
  }, []);

  return (
    <input
      id={id}
      ref={inputRef}
      type="range"
      min={min}
      max={max}
      step={step}
      defaultValue={value}
    />
  );
};

const App = () => {
  const [value, setValue] = React.useState(gsap.utils.random(0, 100, 1));

  return (
    <>
      <label htmlFor="slidey">{value}</label>
      <SlideySlider value={value} id="slidey" />
    </>
  );
};

ReactDOM.render(<App />, ROOT_NODE);