import { jsxs as N, jsx as f } from "react/jsx-runtime";
import { useState as d, useCallback as K, useMemo as at, useEffect as D } from "react";
import { useMemoizedId as lt } from "../../hooks/useMemoizedId.es.js";
import { debounce as it } from "../../utilities/debounce.es.js";
import { merge as m } from "../../utilities/merge.es.js";
import { clamp as $ } from "../../utilities/number.es.js";
import { Validation as S } from "../../utilities/validation.es.js";
import { TextInput as wt, TextInputType as ct } from "../TextInput/TextInput.es.js";
var ut = /* @__PURE__ */ ((b) => (b.MinMax = "MinMax", b.ValueOutOfRange = "ValueOutOfRange", b.ValueNaN = "ValueNaN", b))(ut || {});
const ft = 0, dt = 100, bt = 1, pt = 5, ht = "Slider text input", mt = 3, z = ["ArrowUp", "ArrowRight"], B = ["ArrowDown", "ArrowLeft"], Y = ["Home", "End"], gt = ({
  id: b,
  label: v,
  value: k,
  min: o = ft,
  max: s = dt,
  showMinMax: U = !1,
  step: c = bt,
  stepMultiplier: j = pt,
  valueSuffix: r = "",
  onError: T,
  onChange: I,
  "aria-label": P = ht,
  "aria-labelledby": R,
  disabled: e = !1,
  "data-test-id": y = "fondue-slider"
}) => {
  const [l, g] = d(), [i, L] = d(""), [p, x] = d(), [_, O] = d(), [a, H] = d(null), [q, F] = d(!1), [C, M] = d(!1), h = lt(b), G = (t) => {
    L(`${t.replace(r, "")}${r}`);
  }, u = K(
    ({ clientX: t, rawValue: n }) => {
      if (!a)
        return;
      const w = s - o, ot = a.getBoundingClientRect().x, rt = a.clientWidth;
      let A;
      if (t !== void 0)
        A = (t - ot) / rt;
      else {
        A = ((n ?? o) - o) / w, O($(A, 0, 1) * 100);
        return;
      }
      const nt = $(A, 0, 1), st = w / c, X = $(Math.round(nt * st) * c + o, o, s);
      O((X - o) / w * 100), L(`${X}${r}`);
    },
    [a, s, o, c, r]
  ), E = at(
    () => a ? it((t) => {
      e || u({
        clientX: t.clientX ?? t.touches[0].clientX
      });
    }, mt) : () => {
    },
    [u, a, e]
  ), V = K(() => {
    a && (M(!1), window.removeEventListener("mousemove", E), window.removeEventListener("touchmove", E), window.removeEventListener("mouseup", V));
  }, [a, E]), W = (t) => {
    !a || e || (M(!0), u({
      clientX: t.clientX ?? t.touches[0].clientX
    }), window.addEventListener("mousemove", E), window.addEventListener("touchmove", E), window.addEventListener("mouseup", V));
  }, J = (t) => {
    if (![...z, ...B, ...Y].includes(t.key) || l === void 0 || e)
      return;
    t.preventDefault();
    let n = 0, w = 0;
    B.includes(t.key) ? n = -c : z.includes(t.key) && (n = c), Y.includes(t.key) ? w = t.key === "Home" ? o : s : (n *= t.shiftKey ? j : 1, w = $(Math.floor(l / c) * c + n, o, s)), g(w), L(`${w}${r}`);
  }, Q = () => {
    e || F(!0);
  }, Z = () => {
    e || F(!1);
  }, tt = () => {
    e || M(!0);
  }, et = () => {
    e || M(!1);
  };
  return D(() => {
    if (!a)
      return;
    if (o > s) {
      x(
        "MinMax"
        /* MinMax */
      );
      return;
    }
    const t = k ?? o;
    g(t), L(`${t}${r}`), u({ rawValue: t });
  }, [a, u, o, s, k, r]), D(() => {
    if (!i)
      return;
    const t = i.replace(r, ""), n = +t;
    if (Number.isNaN(n) || !t) {
      g(void 0), x(
        "ValueNaN"
        /* ValueNaN */
      );
      return;
    }
    if (n < o || n > s) {
      g(void 0), x(
        "ValueOutOfRange"
        /* ValueOutOfRange */
      );
      return;
    }
    x(void 0), g(n);
  }, [i, r, o, s]), D(() => {
    if (p || l === void 0 || !i)
      return;
    const n = +i.replace(r, "");
    Number.isNaN(n) || l !== n || (u({ rawValue: l }), e || I({
      raw: l,
      withSuffix: i.replace(r, "") + r
    }));
  }, [l, i, r, p, I, u, e]), D(() => {
    p && T && T(p);
  }, [p, T]), /* @__PURE__ */ N("div", { className: "tw-flex tw-flex-col", "data-test-id": y, id: h, children: [
    /* @__PURE__ */ f(
      "label",
      {
        id: `${h}-label`,
        htmlFor: h,
        className: m([!v && "tw-hidden", e && "tw-text-text-disabled"]),
        "data-test-id": `${y}-label`,
        children: v
      }
    ),
    /* @__PURE__ */ f("div", { className: "tw-flex", children: /* @__PURE__ */ N("div", { className: m(["tw-flex-1 tw-flex tw-items-center"]), children: [
      U && /* @__PURE__ */ N("div", { className: m(["tw-mr-3", e && "tw-text-text-disabled"]), children: [
        o,
        r
      ] }),
      /* @__PURE__ */ N(
        "button",
        {
          type: "button",
          ref: H,
          "data-test-id": `${y}-interactive`,
          className: "tw-flex-1 tw-relative tw-h-full tw-cursor-pointer disabled:tw-cursor-default tw-outline-none",
          onMouseOver: Q,
          onMouseOut: Z,
          onFocus: tt,
          onBlur: et,
          onMouseDown: W,
          onMouseUp: V,
          onTouchStart: W,
          onTouchEnd: V,
          onKeyDown: J,
          disabled: e,
          children: [
            /* @__PURE__ */ f("span", { className: "tw-absolute tw-block tw-top-1/2 tw--translate-y-1/2 tw-w-full tw-h-1 tw-rounded-sm tw-bg-box-neutral tw-flex-1" }),
            _ !== void 0 && /* @__PURE__ */ f(
              "span",
              {
                role: "slider",
                "aria-valuenow": l,
                "aria-valuemin": o,
                "aria-valuemax": s,
                "aria-label": P,
                "aria-labelledby": v ? `${h}-label` : R,
                "data-test-id": `${y}-track`,
                className: m([
                  "tw-absolute tw-block tw-top-1/2 tw--translate-y-1/2 tw-origin-left tw-w-full tw-h-1  tw-rounded-sm tw-bg-box-neutral-strong tw-flex-1",
                  e && "tw-bg-box-neutral"
                ]),
                style: { width: `${_}%` }
              }
            ),
            /* @__PURE__ */ f(
              "span",
              {
                className: m([
                  "tw-absolute tw-block tw-top-1/2 tw--translate-y-1/2 tw--translate-x-1/2 tw-w-5 tw-h-5",
                  "after:tw-absolute after:tw-block after:tw-top-1/2 after:tw-left-1/2 after:tw--translate-y-1/2 after:tw--translate-x-1/2 after:tw-w-5 after:tw-h-5 after:tw-bg-base after:tw-rounded-full after:tw-border after:tw-border-line-strong",
                  q && !C && "after:tw-shadow",
                  C && "after:tw-border-line-xx-strong before:tw-content-[''] before:tw-opacity-25 before:tw-top-1/2 before:tw--translate-y-1/2 before:tw--translate-x-1/2 before:tw-left-1/2 before:tw-block before:tw-rounded-full before:tw-absolute before:tw-z-0 before:tw-w-9 before:tw-h-9 before:tw-bg-box-neutral-strong",
                  e && "after:tw-bg-box-neutral after:tw-border-line-weak"
                ]),
                style: { left: `${_}%` }
              }
            )
          ]
        }
      ),
      U && /* @__PURE__ */ N("div", { className: m(["tw-ml-3", e && "tw-text-text-disabled"]), children: [
        s,
        r
      ] }),
      /* @__PURE__ */ f("div", { className: "tw-w-16 tw-ml-3", children: /* @__PURE__ */ f(
        wt,
        {
          id: `${h}-text-input`,
          value: i,
          placeholder: P,
          "aria-labelledby": v ? `${h}-label` : R,
          type: ct.Text,
          validation: p ? S.Error : S.Default,
          onChange: G,
          disabled: e
        }
      ) })
    ] }) })
  ] });
};
gt.displayName = "FondueSlider";
export {
  ht as ARIA_LABEL_DEFAULT_VALUE,
  dt as MAX_DEFAULT_VALUE,
  ft as MIN_DEFAULT_VALUE,
  bt as STEP_DEFAULT_VALUE,
  pt as STEP_MULTIPLIER_DEFAULT_VALUE,
  gt as Slider,
  ut as SliderError
};
//# sourceMappingURL=Slider.es.js.map
