'use client';

import { useItemSelector } from "../../../hooks/useItemSelector.mjs";
import { InputIndicator, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from "../../Input/OTPInput.mjs";
import { useFormField } from "../FormField.mjs";
import { FormItemLayout } from "../layout/FormItemLayout.mjs";
import { Form } from "../Form.mjs";
import { useEffect, useRef } from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
import { useFormContext } from "react-hook-form";

//#region src/components/Form/elements/OTPElement.tsx
const selector = (option) => option?.getAttribute("aria-active") === "true";
const OTPFieldContent = ({ field, name, label, description, isRequired, info, showErrorMessage, children, slots = 6, maxLength = 6, ...props }) => {
	const { error } = useFormField();
	const optionsRefs = useRef([]);
	const { choiceIndicatorPosition, calculatePosition } = useItemSelector(optionsRefs, {
		selector,
		isHoverable: true
	});
	useEffect(() => {
		calculatePosition();
	}, []);
	return /* @__PURE__ */ jsx(FormItemLayout, {
		htmlFor: name,
		label,
		description,
		isRequired,
		info,
		showErrorMessage,
		"aria-invalid": !!error,
		children: /* @__PURE__ */ jsx(InputOTP, {
			onChange: field.onChange,
			defaultValue: field.value,
			maxLength,
			pattern: "^[0-9]+$",
			onActiveSlotChange: calculatePosition,
			...props,
			children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
				/* @__PURE__ */ jsxs(InputOTPGroup, { children: [
					/* @__PURE__ */ jsx(InputOTPSlot, {
						index: 0,
						ref: (el) => {
							optionsRefs.current[0] = el;
						}
					}),
					/* @__PURE__ */ jsx(InputOTPSlot, {
						index: 1,
						ref: (el) => {
							optionsRefs.current[1] = el;
						}
					}),
					/* @__PURE__ */ jsx(InputOTPSlot, {
						index: 2,
						ref: (el) => {
							optionsRefs.current[2] = el;
						}
					})
				] }),
				/* @__PURE__ */ jsx(InputOTPSeparator, {}),
				/* @__PURE__ */ jsxs(InputOTPGroup, { children: [
					/* @__PURE__ */ jsx(InputOTPSlot, {
						index: 3,
						ref: (el) => {
							optionsRefs.current[3] = el;
						}
					}),
					/* @__PURE__ */ jsx(InputOTPSlot, {
						index: 4,
						ref: (el) => {
							optionsRefs.current[4] = el;
						}
					}),
					/* @__PURE__ */ jsx(InputOTPSlot, {
						index: 5,
						ref: (el) => {
							optionsRefs.current[5] = el;
						}
					})
				] }),
				choiceIndicatorPosition && /* @__PURE__ */ jsx(InputIndicator, { style: choiceIndicatorPosition })
			] })
		})
	});
};
const OTPElement = ({ name, description, label, isRequired, info, showErrorMessage, children, slots = 6, maxLength = 6, ...props }) => {
	const { control } = useFormContext();
	return /* @__PURE__ */ jsx(Form.Field, {
		control,
		name,
		render: ({ field }) => /* @__PURE__ */ jsx(OTPFieldContent, {
			field,
			name,
			label,
			description,
			isRequired,
			info,
			showErrorMessage,
			slots,
			maxLength,
			...props,
			children
		})
	});
};

//#endregion
export { OTPElement };
//# sourceMappingURL=OTPElement.mjs.map