import { jsxs as P, jsx as r } from "react/jsx-runtime";
import b, { useRef as w, useCallback as A, useEffect as B, useMemo as y } from "react";
import { InputOTPGroup as O, InputOTPSlot as I, InputOTPSeparator as F, BaseInputOTP as q } from "./InputOTPPrimitive.js";
import { patternVariants as G } from "./types/PatternVariant.js";
import S from "../label/Label.js";
import { c as h } from "../../index-BtlgVD4m.js";
import z from "../error-message/ErrorMessage.js";
import { alignVariants as D } from "./types/AlignVariant.js";
const H = ({
  ref: T,
  maxLength: s = 6,
  groupLength: m,
  pattern: e,
  separator: d = !1,
  description: v,
  onChange: l,
  value: f,
  disabled: R = !1,
  label: j,
  alignment: E = "left",
  errorMessage: p,
  isError: u
}) => {
  const N = w(e), a = A(
    (i) => {
      l == null || l(i);
    },
    [l]
  );
  B(() => {
    if (N.current !== e && f && l) {
      const i = G[e];
      if (i) {
        const c = f.split("").filter((o) => new RegExp(i).test(o)).join("");
        c !== f && a(c);
      }
    }
    N.current = e;
  }, [e, f, l, a]);
  const V = y(() => {
    const i = Array.from({ length: s }, (t, n) => n), c = m && m <= s ? m : void 0;
    if (!c)
      return d ? i.map((t, n) => /* @__PURE__ */ P(b.Fragment, { children: [
        /* @__PURE__ */ r(O, { children: /* @__PURE__ */ r(I, { index: t, isError: !!p || u }) }),
        n < s - 1 && /* @__PURE__ */ r(F, {})
      ] }, t)) : /* @__PURE__ */ r(O, { children: i.map((t) => /* @__PURE__ */ r(I, { index: t, isError: !!p || u }, t)) });
    const o = [];
    for (let t = 0; t < s; t += c) {
      const n = i.slice(t, t + c);
      o.push(n);
    }
    return o.map((t, n) => /* @__PURE__ */ P(b.Fragment, { children: [
      /* @__PURE__ */ r(O, { children: t.map((_) => /* @__PURE__ */ r(I, { index: _, isError: !!p || u }, _)) }),
      d && n < o.length - 1 && /* @__PURE__ */ r(F, {})
    ] }, n));
  }, [m, s, d, p, u]), k = y(() => {
    const i = G[e], c = {
      ref: T,
      maxLength: s,
      ...i && {
        pattern: i
      },
      value: f,
      onChange: a,
      disabled: R
    };
    return /* @__PURE__ */ r(q, { ...c, children: V });
  }, [R, a, s, e, T, V, f]);
  return /* @__PURE__ */ P("div", { className: h("flex", "flex-col", "relative", "items-center", E && D[E], "gap-[var(--spacing-2)]"), children: [
    j && /* @__PURE__ */ r(S, { variant: "field", className: h(!!p && "text-[var(--base-danger-text)]"), children: j }),
    k,
    v && /* @__PURE__ */ r(S, { variant: "subtitle", children: v }),
    /* @__PURE__ */ r(z, { message: p })
  ] });
};
H.displayName = "InputOTP";
export {
  H as default
};
//# sourceMappingURL=InputOTP.js.map
