"use client";

import { cn } from "@/lib/utils";
import {
  m,
  MotionConfig,
  Transition,
  useMotionValue,
  useTransform,
} from "motion/react";
import { useEffect, useRef, useState } from "react";

function useMeasure<T extends HTMLElement>() {
  const [bounds, setBounds] = useState({ width: 0, height: 0, top: 0, left: 0 });
  const ref = useRef<T | null>(null);
  useEffect(() => {
    if (!ref.current) return;
    const ro = new ResizeObserver(([entry]) => {
      const r = entry.contentRect;
      setBounds({ width: r.width, height: r.height, top: r.top, left: r.left });
    });
    ro.observe(ref.current);
    return () => ro.disconnect();
  }, []);
  return [ref, bounds] as const;
}

const TRANSITION: Transition = { type: "spring", bounce: 0, duration: 0.3 };

let clamp = (num: number, min: number, max: number) =>
  Math.max(Math.min(num, max), min);

function roundTo(number: number, decimals: number): number {
  return Math.round(number * Math.pow(10, decimals)) / Math.pow(10, decimals);
}

const Volume = () => {
  let initialHeight = 4;
  let height = 12;
  // let buffer = 12;
  const [clicked, setClicked] = useState(false);
  const [ref, bounds] = useMeasure<HTMLDivElement>();
  let [hovered, setHovered] = useState(false);

  let [panning, setPanning] = useState(false);
  let progress = useMotionValue(0.5);
  // let width = useTransform(progress, (v) => `${v * 100}%`);
  let roundedProgress = useTransform(
    progress,
    (v) => `${roundTo(v * 100, 0)}%`
  );
  const widthValueRef = useRef<string | null>(null);

  useEffect(() => {
    const unsub = roundedProgress.on("change", (v) => { widthValueRef.current = v; });
    return () => { unsub(); };
  }, [roundedProgress]);

  let state = panning ? "panning" : hovered ? "hovered" : "idle";
  return (
    <MotionConfig transition={TRANSITION}>
      <div className="center full" onClickCapture={() => setClicked(true)} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); setClicked(true); } }} aria-label="Volume slider">
        <div className="flex items-center gap-4 border relative w-44 h-10">
          <div className="flex items-center">
            <svg width="25" height="25" viewBox="0 0 25 25" fill="none">
              <path
                d="M16.9 20C17.5 20 18 19.5 18 18.9V5.4C18 4.8 17.5 4.3 16.8 4.3C16.4 4.3 16.1 4.4 15.6 4.9L11.9 8.3C11.9 8.4 11.8 8.4 11.7 8.4H9.2C7.9 8.4 7.2 9.1 7.2 10.5V13.8C7.2 15.1 7.9 15.9 9.2 15.9H11.7C11.8 15.9 11.9 15.9 11.9 15.9L15.6 19.4C16 19.8 16.4 20 16.9 20Z"
                fill="currentColor"
              ></path>
            </svg>
            <div className="flex items-center">
              <svg
                width="3"
                height="9"
                viewBox="0 0 3 9"
                fill="none"
                style={{ opacity: 1, transform: "translateY(-0.5px)" }}
              >
                <path
                  d="M0.4 8.7C0.8 9 1.3 8.9 1.5 8.5C2.2 7.5 2.7 6.2 2.7 4.8C2.7 3.4 2.2 2.1 1.5 1.1C1.3 0.7 0.8 0.6 0.4 0.9C0 1.2 -0.1 1.7 0.2 2.2C0.7 2.9 1 3.8 1 4.8C1 5.8 0.7 6.7 0.2 7.4C-0.1 7.9 0 8.4 0.4 8.7Z"
                  fill="currentColor"
                ></path>
              </svg>
              <svg
                width="4"
                height="14"
                viewBox="0 0 4 14"
                fill="none"
                style={{ opacity: 1 }}
              >
                <path
                  d="M0.9 13.1C1.3 13.3 1.8 13.2 2.1 12.8C3.2 11.2 3.9 9 3.9 6.8C3.9 4.6 3.3 2.4 2.1 0.8C1.8 0.4 1.3 0.3 0.9 0.5C0.5 0.8 0.4 1.3 0.8 1.8C1.7 3.1 2.2 4.9 2.2 6.8C2.2 8.6 1.7 10.4 0.8 11.8C0.4 12.3 0.5 12.8 0.9 13.1Z"
                  fill="currentColor"
                ></path>
              </svg>
              <svg
                width="5"
                height="18"
                viewBox="0 0 5 18"
                fill="none"
                style={{ opacity: 1 }}
              >
                <path
                  d="M0.5 17.4C0.9 17.7 1.4 17.6 1.7 17.2C3.2 14.8 4.1 12 4.1 8.8C4.1 5.6 3.2 2.7 1.7 0.4C1.4 -0 0.9 -0.1 0.5 0.1C0.1 0.4 -0 0.9 0.3 1.4C1.6 3.4 2.5 6 2.5 8.8C2.5 11.6 1.6 14.1 0.3 16.2C-0 16.7 0.1 17.2 0.5 17.4Z"
                  fill="currentColor"
                ></path>
              </svg>
            </div>
          </div>
          <div className="flex-1 h-full">
            <m.div
              animate={state}
              onPanStart={() => setPanning(true)}
              onPanEnd={() => setPanning(false)}
              onPointerEnter={() => setHovered(true)}
              onPointerLeave={() => {
                setHovered(false);
                // setClicked(false);
              }}
              onPan={(_, info) => {
                let deltaInPercent = info.delta.x / bounds.width;
                let newPercent = clamp(progress.get() + deltaInPercent, 0, 1);
                progress.set(newPercent);
              }}
              className={cn(
                "flex items-center justify-center relative touch-none grow-0 w-full",
                clicked && "absolute inset-0 "
              )}
              initial={false}
              ref={ref}
            >
              <m.div
                initial={false}
                variants={{
                  idle: { height: initialHeight },
                  hovered: { height },
                  panning: { height },
                }}
                className="relative rounded-full overflow-hidden w-full"
              >
                <div className="h-full bg-muted" />
                <m.div
                  animate={{ scaleX: progress.get() }}
                  style={{ transformOrigin: "left" }}
                  className="bg-red-500 absolute w-[20%] inset-0"
                />
              </m.div>
            </m.div>
          </div>
        </div>
      </div>
    </MotionConfig>
  );
};

export default Volume;
Volume Slider
