import { jsx as i } from "react/jsx-runtime";
import { useEffect as s } from "react";
import { Box as c, TextField as l } from "@mui/material";
import p from "lodash/trim";
import m from "lodash/noop";
import { mergeSx as g } from "../Util/style.js";
const y = 6;
function B({
  length: r = y,
  code: e,
  onChange: u = m,
  onComplete: a = m,
  sx: f = {}
}) {
  return s(() => {
    e.length === r && a?.(e);
  }, [e, r]), /* @__PURE__ */ i(
    c,
    {
      sx: g(
        {
          width: "100%",
          maxWidth: 360,
          display: "flex",
          justifyContent: "space-between",
          gap: 1.5
        },
        f
      ),
      children: [...Array(r)].map((b, t) => /* @__PURE__ */ i(
        l,
        {
          id: `code-input-${t}`,
          value: p(e[t]) || "",
          type: "number",
          onChange: (o) => {
            const n = e.split("");
            n[t] = o.target.value, u?.(n.join("")), o.target.value && t < 5 && document.getElementById(`code-input-${t + 1}`)?.focus();
          },
          onKeyDown: (o) => {
            o.key === "Backspace" && !p(e[t]) && t > 0 && document.getElementById(`code-input-${t - 1}`)?.focus();
          },
          required: !0,
          autoComplete: "off",
          slotProps: {
            htmlInput: {
              maxLength: 1,
              sx: {
                textAlign: "center",
                fontSize: "1.5rem",
                "&::-webkit-inner-spin-button, &::-webkit-outer-spin-button": {
                  WebkitAppearance: "none",
                  margin: 0
                }
              },
              autoComplete: "off",
              pattern: "[0-9]",
              inputMode: "numeric"
            }
          }
        },
        `code-input-${t}`
      ))
    }
  );
}
export {
  y as VERIFY_CODE_LENGTH,
  B as default
};
