import { jsxs as W, jsx as c } from "react/jsx-runtime";
import { useState as u, useEffect as Z } from "react";
import { noop as A } from "es-toolkit/compat";
import ee from "../../utils/classNames.js";
import { getCurrentBackgroundColor as te } from "../../utils/currentColors.js";
const M = (r, t) => {
  const o = t <= r ? t : r, m = r >= t ? r : t;
  return [o, m];
}, ie = (r) => {
  const {
    minValue: t = 0,
    maxValue: o = Number.MAX_VALUE,
    valueLabels: m = !1,
    valueLabelUnit: v,
    step: C = 1,
    color: B = "primary",
    leftValue: N,
    rightValue: k,
    className: w,
    disabled: P = !1,
    onChange: E = A,
    onDragEnd: b = A,
    ...X
  } = r, [j, R] = u(!1), [z, p] = u(!1), [a, x] = u(N || t), [n, $] = u(k || o), [y, g] = u(!1), [I, f] = u(!1);
  Z(() => {
    a >= t && a <= o && n >= t && n <= o && (x(a), $(n));
  }, [a, n, t, o]);
  const U = (e) => {
    const s = e.valueLeft ? e.valueLeft : a, l = e.valueRight ? e.valueRight : n;
    x(s), $(l), g(!!e.valueLeft), f(!!e.valueRight);
    const [i, h] = M(s, l);
    E(i, h);
  }, H = (e) => {
    U({ valueLeft: Number.parseInt(e.target.value, 10) });
  }, S = (e) => {
    U({ valueRight: Number.parseInt(e.target.value, 10) });
  }, T = () => {
    g(!0), f(!1);
  }, _ = () => {
    g(!1), f(!0);
  }, D = (e) => {
    const s = (a - t) / (o - t), l = (n - t) / (o - t);
    return (s + l) / 2 * e;
  }, q = (e) => {
    const s = e.target;
    if (!y) {
      const l = s.getBoundingClientRect(), i = e.clientX - l.left, h = s.offsetWidth, d = D(h);
      n > a && i > d && (R(!1), p(!0)), n < a && i < d && (R(!1), p(!0));
    }
  }, F = (e) => {
    const s = e.target;
    if (!I) {
      const l = s.getBoundingClientRect(), i = e.clientX - l.left, h = s.offsetWidth, d = D(h);
      n > a && i < d && (R(!0), p(!1)), n < a && i > d && (R(!0), p(!1));
    }
  }, G = () => {
    g(!1), f(!1);
    const [e, s] = M(a, n);
    b(e, s);
  }, J = () => {
    g(!1), f(!1);
    const [e, s] = M(a, n);
    b(e, s);
  }, [L, V] = M(a, n), K = 100 * (V - L) / (o - t), O = 100 * (L - t) / (o - t), Q = ee(
    "range-slider",
    P && "disabled",
    m && "show-value-labels",
    w && w
  ), Y = te(B);
  return /* @__PURE__ */ W("div", { ...X, className: Q, style: { color: Y }, children: [
    /* @__PURE__ */ c("div", { className: "range-whole-track" }),
    /* @__PURE__ */ c("div", { className: "range-track", style: { width: `${K}%`, left: `${O}%` }, children: m && /* @__PURE__ */ W("div", { className: "user-select-none", children: [
      /* @__PURE__ */ c("div", { className: "range-value", children: /* @__PURE__ */ c("span", { children: v ? `${L} ${v}` : L }) }),
      /* @__PURE__ */ c("div", { className: "range-value", children: /* @__PURE__ */ c("span", { children: v ? `${V} ${v}` : V }) })
    ] }) }),
    /* @__PURE__ */ c(
      "input",
      {
        className: `${y ? "changing" : ""}`,
        style: { zIndex: j ? "6" : "5" },
        value: a,
        min: t,
        max: o,
        step: C,
        type: "range",
        onChange: H,
        onMouseDown: T,
        onMouseMove: q,
        onMouseUp: G
      }
    ),
    /* @__PURE__ */ c(
      "input",
      {
        className: `${I ? "changing" : ""}`,
        style: { zIndex: z ? "6" : "5" },
        value: n,
        min: t,
        max: o,
        step: C,
        type: "range",
        onChange: S,
        onMouseDown: _,
        onMouseMove: F,
        onMouseUp: J
      }
    )
  ] });
};
export {
  ie as default
};
//# sourceMappingURL=RangeSlider.js.map
