import { I as E } from "../input/input.js";
import { jsx as M } from "react/jsx-runtime";
import { useState as V, useRef as I, useEffect as _, useMemo as j, useCallback as o, createElement as q } from "react";
import { n as T, q as z, c as G, s as H, m as J, a as Q } from "../tools/tools.js";
const U = function(O) {
  const {
    as: K = "div",
    className: u,
    defaultValue: m,
    dropOldClass: g,
    inputProps: n,
    length: k = 4,
    maxLength: f = 1,
    style: y,
    variables: h,
    ...A
  } = O, [s, D] = V(
    () => Array.from({ length: k }).map((e, t) => ({
      id: T(),
      value: z(m) ? String(m[t]) : ""
    }))
  ), r = I(/* @__PURE__ */ new Map()), R = I(!1);
  _(() => {
    if (R.current) {
      const e = r.current;
      return () => {
        e.clear();
      };
    } else
      R.current = !0;
  }, []);
  const F = j(() => {
    const e = G(!g && "d-flex gap-4", u), t = H((a, l) => ({ tKey: Q(l) }), h, y);
    return { className: e, style: t };
  }, [u, g, y, h]), c = o(
    (e) => {
      var t;
      (t = r.current.get(s[e].id)) == null || t.focus();
    },
    [s]
  ), d = o(
    (e, t) => {
      D((a) => {
        const l = a.map((v, b) => b === e ? { ...v, value: t } : v);
        return t.length === f && t && e < l.length - 1 && c(e + 1), l;
      });
    },
    [c, f]
  ), w = o(
    (e, t) => {
      const a = t.key;
      a === "Backspace" && !s[e].value && e > 0 && c(e - 1), (a === "ArrowLeft" && e > 0 || a === "ArrowRight" && e < s.length - 1) && (c(a === "ArrowLeft" ? e - 1 : e + 1), t.preventDefault());
    },
    [s, c]
  ), C = o(
    (e) => {
      var t;
      (t = r.current.get(s[e].id)) == null || t.select();
    },
    [s]
  ), L = o(
    (e, t) => {
      var a;
      r.current.set(t.id, e), (a = n == null ? void 0 : n.onRef) == null || a.call(n, e);
    },
    [n]
  ), N = o(
    (e, t) => {
      var a;
      d(t, e.target.value), (a = n == null ? void 0 : n.onChange) == null || a.call(n, e);
    },
    [d, n]
  ), B = o(
    (e, t) => {
      var a;
      w(t, e), (a = n == null ? void 0 : n.onKeyDown) == null || a.call(n, e);
    },
    [w, n]
  ), S = o(
    (e, t) => {
      var a;
      C(t), (a = n == null ? void 0 : n.onFocus) == null || a.call(n, e);
    },
    [C, n]
  );
  return /* @__PURE__ */ M(K, { ...A, ...F, children: s.map((e, t) => /* @__PURE__ */ q(
    E,
    {
      className: "text-center",
      ...J(n, {
        onChange: (a) => N(a, t),
        onFocus: (a) => S(a, t),
        onKeyDown: (a) => B(a, t),
        onRef: (a) => L(a, e)
      }),
      key: e.id,
      maxLength: f,
      value: e.value
    }
  )) });
};
U.displayName = "BRL.InputOtp";
export {
  U as I
};
//# sourceMappingURL=input-otp.js.map
