"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import { cn } from "../../lib/utils";
function DoubleRange({
  value,
  onChange,
  min = 0,
  max = 100,
  step = 1,
  disabled = false,
  className,
  formatLabel = (val) => val.toString(),
  showLabels = true
}) {
  const [localValue, setLocalValue] = React.useState(
    () => value || [min, max]
  );
  const trackRef = React.useRef(null);
  const [isDragging, setIsDragging] = React.useState(null);
  const localValueRef = React.useRef(localValue);
  localValueRef.current = localValue;
  React.useEffect(() => {
    if (value && !isDragging && (value[0] !== localValueRef.current[0] || value[1] !== localValueRef.current[1])) {
      setLocalValue(value);
    }
  }, [value, isDragging]);
  const getPercentage = (val) => (val - min) / (max - min) * 100;
  const getValueFromPosition = React.useCallback((clientX) => {
    if (!trackRef.current) return min;
    const rect = trackRef.current.getBoundingClientRect();
    const percentage = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
    const newValue = min + percentage * (max - min);
    return Math.round(newValue / step) * step;
  }, [min, max, step]);
  const updateValue = React.useCallback((newRange) => {
    setLocalValue(newRange);
    onChange(newRange);
  }, [onChange]);
  const handleMouseDown = (type) => (e) => {
    if (disabled) return;
    e.preventDefault();
    setIsDragging(type);
  };
  React.useEffect(() => {
    if (!isDragging) return;
    const handleMouseMove = (e) => {
      if (!isDragging || disabled) return;
      const newValue = getValueFromPosition(e.clientX);
      setLocalValue((current) => {
        const [currentMin, currentMax] = current;
        let newRange;
        if (isDragging === "min") {
          newRange = [Math.min(newValue, currentMax - step), currentMax];
        } else {
          newRange = [currentMin, Math.max(newValue, currentMin + step)];
        }
        onChange(newRange);
        return newRange;
      });
    };
    const handleMouseUp = () => {
      setIsDragging(null);
    };
    document.addEventListener("mousemove", handleMouseMove);
    document.addEventListener("mouseup", handleMouseUp);
    return () => {
      document.removeEventListener("mousemove", handleMouseMove);
      document.removeEventListener("mouseup", handleMouseUp);
    };
  }, [isDragging, getValueFromPosition, step, disabled, onChange]);
  const handleTrackClick = React.useCallback((e) => {
    if (disabled || isDragging) return;
    const newValue = getValueFromPosition(e.clientX);
    const [currentMin, currentMax] = localValue;
    const midPoint = (currentMin + currentMax) / 2;
    let newRange;
    if (newValue < midPoint) {
      newRange = [Math.min(newValue, currentMax - step), currentMax];
    } else {
      newRange = [currentMin, Math.max(newValue, currentMin + step)];
    }
    updateValue(newRange);
  }, [disabled, isDragging, getValueFromPosition, localValue, step, updateValue]);
  const minPercentage = getPercentage(localValue[0]);
  const maxPercentage = getPercentage(localValue[1]);
  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-3", disabled && "opacity-50", className), children: [
    showLabels && /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-sm text-muted-foreground", children: [
      /* @__PURE__ */ jsx("span", { children: formatLabel(localValue[0]) }),
      /* @__PURE__ */ jsx("span", { children: formatLabel(localValue[1]) })
    ] }),
    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
      /* @__PURE__ */ jsxs(
        "div",
        {
          ref: trackRef,
          className: "relative h-2 bg-secondary rounded-full cursor-pointer",
          onClick: handleTrackClick,
          children: [
            /* @__PURE__ */ jsx(
              "div",
              {
                className: "absolute h-full bg-primary rounded-full",
                style: {
                  left: `${minPercentage}%`,
                  width: `${maxPercentage - minPercentage}%`
                }
              }
            ),
            /* @__PURE__ */ jsx(
              "div",
              {
                className: cn(
                  "absolute w-5 h-5 bg-background border-2 border-primary rounded-full cursor-pointer -top-1.5 transform -translate-x-1/2 transition-all",
                  "hover:scale-110 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
                  disabled && "cursor-not-allowed hover:scale-100"
                ),
                style: { left: `${minPercentage}%` },
                onMouseDown: handleMouseDown("min"),
                tabIndex: disabled ? -1 : 0,
                role: "slider",
                "aria-label": "Minimum value",
                "aria-valuemin": min,
                "aria-valuemax": max,
                "aria-valuenow": localValue[0]
              }
            ),
            /* @__PURE__ */ jsx(
              "div",
              {
                className: cn(
                  "absolute w-5 h-5 bg-background border-2 border-primary rounded-full cursor-pointer -top-1.5 transform -translate-x-1/2 transition-all",
                  "hover:scale-110 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
                  disabled && "cursor-not-allowed hover:scale-100"
                ),
                style: { left: `${maxPercentage}%` },
                onMouseDown: handleMouseDown("max"),
                tabIndex: disabled ? -1 : 0,
                role: "slider",
                "aria-label": "Maximum value",
                "aria-valuemin": min,
                "aria-valuemax": max,
                "aria-valuenow": localValue[1]
              }
            )
          ]
        }
      ),
      /* @__PURE__ */ jsxs("div", { className: "flex justify-between text-xs text-muted-foreground mt-1", children: [
        /* @__PURE__ */ jsx("span", { children: formatLabel(min) }),
        /* @__PURE__ */ jsx("span", { children: formatLabel(max) })
      ] })
    ] })
  ] });
}
export {
  DoubleRange
};
