import { jsxs as T, jsx as s, Fragment as nt } from "react/jsx-runtime";
import { useRef as C, useCallback as I, useEffect as rt } from "react";
import ot from "../../foundation/Icon/Generated/IconMinus16.es.js";
import ct from "../../foundation/Icon/Generated/IconPlus16.es.js";
import { useMemoizedId as ut } from "../../hooks/useMemoizedId.es.js";
import { InputStyles as o, InputActions as lt, GetStatusIcon as it } from "../../utilities/input.es.js";
import { merge as p } from "../../utilities/merge.es.js";
import { validationClassMap as st, Validation as at } from "../../utilities/validation.es.js";
import { NumberInputIncrement as u } from "./types.es.js";
const mt = ["ArrowUp", "ArrowRight"], ht = ["ArrowDown", "ArrowLeft"], dt = ["Backspace", "Tab"], wt = ({
  id: L,
  size: W,
  disabled: i = !1,
  required: Y,
  readOnly: a,
  status: b = at.Default,
  decorator: V,
  suffix: r = "",
  controls: _,
  clearable: B,
  placeholder: H,
  stepInterval: M = 10,
  title: O,
  defaultValue: v,
  hugWidth: z,
  value: G,
  valueSelect: h,
  onChange: N,
  onKeyDown: $,
  onBlur: A,
  onFocus: P,
  "aria-label": q = "Number Input",
  "data-test-id": l = "fondue-number-input",
  ...J
}) => {
  const y = C(0), R = C(!1), D = C(!1), n = C(null), E = i || a, d = I(() => {
    if (n.current) {
      const { value: t } = n.current;
      return r ? t.replace(`${r}`, "").trim() : t;
    }
    return "";
  }, [n, r]), f = () => {
    clearInterval(y.current), D.current = !1;
  }, g = (t) => {
    n.current && !i && (D.current = !0, Q(t));
  }, Q = (t) => {
    (() => {
      let m = 0, c = 0;
      y.current = window.setInterval(() => {
        switch (!0) {
          case m > 2e3:
            c += 5;
            break;
          case m > 5e3:
            c += 10;
            break;
          default:
            c = 1;
        }
        w(t, c), m += 250;
      }, 250);
    })();
  }, X = (t) => {
    const { key: e, shiftKey: m } = t;
    if (dt.includes(e)) {
      const c = d(), S = c.length === 2 && c.includes("-");
      ((c == null ? void 0 : c.length) === 0 || S) && F();
      return;
    } else if (!isNaN(Number(e)))
      return;
    t.preventDefault(), R.current = m, ht.includes(e) ? w(u.DECREMENT) : mt.includes(e) && w(u.INCREMENT), $ && $(t);
  }, Z = (t) => {
    t.preventDefault(), R.current = t.shiftKey, n.current && K();
  }, w = (t, e = 1) => {
    const c = (() => {
      const S = d(), k = Number(S) || 0;
      switch (e = R.current ? M : e, t) {
        case u.DECREMENT:
          return k - e;
        case u.INCREMENT:
          return k + e;
        default:
          return k;
      }
    })();
    U(c);
  }, U = (t) => {
    if (n.current) {
      const e = t.toString();
      if (n.current.value = r ? `${e} ${r}` : e, D.current)
        return;
      K();
    }
  }, j = I(() => {
    if (h && n.current) {
      const t = n.current.value.length, e = r ? t - r.length - 1 : t;
      n.current.setSelectionRange(0, e);
    }
  }, [r, h]), x = I(() => {
    if (r && n.current) {
      const t = n.current.value.length - r.length - 1;
      n.current.setSelectionRange(t, t);
    }
  }, [r, n]), K = I(() => {
    const t = d();
    N == null || N(t ? Number(t) : void 0), r && x(), h && j();
  }, [r, h, N, d, x, j]), F = () => {
    n.current && (n.current.value = v ? v.toString() : ""), K();
  }, tt = (t) => {
    P && P(t);
  }, et = (t) => {
    A && A(t);
  };
  return rt(() => {
    clearInterval(y.current);
  }, []), /* @__PURE__ */ T(
    "div",
    {
      className: p([
        o.base,
        o.height,
        o.hover,
        o.focusWithin,
        z ? "tw-w-auto" : o.width,
        i || a ? o.readOnly : "",
        b ? st[b] : ""
      ]),
      "data-test-id": l,
      children: [
        V ? /* @__PURE__ */ s(
          "div",
          {
            className: p([
              "tw-flex tw-items-center tw-justify-center tw-pl-1",
              E ? "tw-text-text-disabled" : "tw-text-text"
            ]),
            "data-test-id": `${l}-decorator`,
            children: V
          }
        ) : null,
        /* @__PURE__ */ s(
          "input",
          {
            ...J,
            defaultValue: v,
            value: G,
            id: ut(L),
            ref: n,
            name: l,
            type: r || h ? "text" : "number",
            placeholder: H,
            className: p([
              "tw-hide-input-arrows",
              o.width,
              o.element,
              i ? o.disabled : "",
              a ? o.readOnly : ""
            ]),
            onClick: r ? x : void 0,
            onChange: () => U(Number(d())),
            onKeyDown: X,
            onKeyUp: Z,
            onFocus: tt,
            onBlur: et,
            size: W,
            title: O,
            "aria-label": q,
            required: Y,
            readOnly: a,
            disabled: i,
            "data-test-id": `${l}-input`
          }
        ),
        /* @__PURE__ */ T("span", { className: "tw-flex tw-items-center", children: [
          _ ? /* @__PURE__ */ T(nt, { children: [
            /* @__PURE__ */ s(
              "button",
              {
                className: p([
                  "tw-text-text-weak tw-p-1 hover:tw-rounded-sm hover:tw-bg-box-neutral hover:tw-text-box-neutral-inverse focus:tw-ring-line-xx-strong focus:tw-bg-box-neutral",
                  i ? o.disabled : "",
                  a ? o.readOnly : ""
                ]),
                type: "button",
                onClick: (t) => {
                  if (t.button === 0) {
                    const e = t.shiftKey ? M : 1;
                    w(u.DECREMENT, e);
                  }
                },
                onMouseDown: (t) => t.shiftKey || t.button > 0 ? null : g(u.DECREMENT),
                onMouseUp: f,
                onTouchStart: (t) => t.shiftKey ? null : g(u.DECREMENT),
                onTouchEnd: f,
                disabled: E,
                "aria-label": "Decrement value",
                title: "Decrement value",
                "data-test-id": `${l}-decrement`,
                children: /* @__PURE__ */ s(ot, {})
              }
            ),
            /* @__PURE__ */ s(
              "button",
              {
                className: p([
                  "tw-text-text-weak tw-p-1 hover:tw-rounded-sm hover:tw-bg-box-neutral hover:tw-text-box-neutral-inverse focus:tw-ring-line-xx-strong focus:tw-bg-box-neutral",
                  i ? o.disabled : "",
                  a ? o.readOnly : ""
                ]),
                type: "button",
                onClick: (t) => {
                  if (t.button === 0) {
                    const e = t.shiftKey ? M : 1;
                    w(u.INCREMENT, e);
                  }
                },
                onMouseDown: (t) => t.shiftKey || t.button > 0 ? null : g(u.INCREMENT),
                onMouseUp: f,
                onTouchStart: (t) => t.shiftKey ? null : g(u.INCREMENT),
                onTouchEnd: f,
                disabled: E,
                "aria-label": "Increment value",
                title: "Increment value",
                "data-test-id": `${l}-increment`,
                children: /* @__PURE__ */ s(ct, {})
              }
            )
          ] }) : null,
          /* @__PURE__ */ s(
            lt,
            {
              disabled: E,
              clearable: B,
              callbacks: { clearable: F },
              dataTestId: l
            }
          ),
          b ? it(b, l) : null
        ] })
      ]
    }
  );
};
wt.displayName = "FondueNumberInput";
export {
  wt as NumberInput
};
//# sourceMappingURL=NumberInput.es.js.map
