import { n as useTranslation } from "./i18n-DoP1NB7u.js";
import { _ as y, h as q, l as A, v as u } from "./vendor-preact-DThS2ZQ_.js";
import { r as Spacer } from "./loadingIcon-B0ysgiNq.js";
import { t as Button } from "./button-BMYTQ8fc.js";
import { t as InputComposed } from "./inputComposed-C1R2LAa3.js";
import "./inputComposed-BaY5q9WM.js";
//#region src/shared/otpInput/otpInput.tsx
var formatTimer = (seconds) => {
	return `${Math.floor(seconds / 60)}:${(seconds % 60).toString().padStart(2, "0")}`;
};
var normalizeOtp = (value, maxLength) => {
	return value.replace(/[^a-zA-Z0-9]/g, "").toUpperCase().slice(0, maxLength);
};
var OtpInput = ({ value, otpLength, resendTimer, canResend, error, validationError, isValid = true, onSubmit, onChange, onValidate, onResend, onBack, backLinkText = "otp.changePhoneNumber", disabled = false, isLoading = false }) => {
	const { t } = useTranslation();
	const inputRef = A(null);
	const prevCodeLengthRef = A(value.length);
	const lastSubmittedCodeRef = A(null);
	const liveRef = A(null);
	const prevCanResendRef = A(canResend);
	const hasAnnouncedStartRef = A(false);
	const announceTimerRef = A();
	const announce = q((message) => {
		const node = liveRef.current;
		if (!node) return;
		clearTimeout(announceTimerRef.current);
		node.textContent = "";
		announceTimerRef.current = setTimeout(() => {
			node.textContent = message;
		}, 50);
	}, []);
	y(() => {
		const wasUnavailable = !prevCanResendRef.current;
		prevCanResendRef.current = canResend;
		if (wasUnavailable && canResend) announce(t("otp.resendCodeAvailable"));
		return () => clearTimeout(announceTimerRef.current);
	}, [
		canResend,
		announce,
		t
	]);
	y(() => {
		if (error) {
			lastSubmittedCodeRef.current = null;
			setTimeout(() => {
				inputRef.current?.focus();
			}, 0);
		}
	}, [error]);
	const submitCode = q((rawCode) => {
		const normalized = normalizeOtp(rawCode, otpLength);
		if (normalized.length !== otpLength || isLoading) return;
		if (lastSubmittedCodeRef.current === normalized) return;
		lastSubmittedCodeRef.current = normalized;
		onSubmit(normalized);
	}, [
		isLoading,
		onSubmit,
		otpLength
	]);
	y(() => {
		const reachedMax = value.length === otpLength && prevCodeLengthRef.current < otpLength;
		prevCodeLengthRef.current = value.length;
		if (reachedMax) submitCode(value);
	}, [
		value,
		otpLength,
		submitCode
	]);
	const handleChange = (e) => {
		const target = e.target;
		onChange(normalizeOtp(target.value, otpLength));
	};
	const handlePaste = (e) => {
		e.preventDefault();
		const normalized = normalizeOtp(e.clipboardData?.getData("text") || "", otpLength);
		if (normalized) onChange(normalized);
	};
	const handleSubmitClick = () => {
		if (value.length < otpLength) {
			onValidate?.();
			inputRef.current?.focus();
			return;
		}
		submitCode(value);
	};
	const displayedError = error ?? validationError;
	y(() => {
		if (canResend || resendTimer <= 0) {
			hasAnnouncedStartRef.current = false;
			return;
		}
		if (!hasAnnouncedStartRef.current) {
			hasAnnouncedStartRef.current = true;
			announce(t("otp.timerStarted", { time: String(resendTimer) }));
			return;
		}
		if (resendTimer === 10) announce(t("otp.timerTenSeconds"));
		else if (resendTimer === 5) announce(t("otp.timerFiveSeconds"));
	}, [
		resendTimer,
		canResend,
		announce,
		t
	]);
	const renderActions = () => {
		if (!canResend && resendTimer > 0) return /* @__PURE__ */ u("div", {
			class: "IncodeOtpInputActions",
			children: /* @__PURE__ */ u("p", {
				class: "IncodeOtpInputTimerText",
				"data-testid": "otp-timer",
				children: t("otp.resendCountdown", { time: formatTimer(resendTimer) })
			})
		});
		const handleResend = () => {
			lastSubmittedCodeRef.current = null;
			onChange("");
			onResend();
		};
		const handleBack = () => {
			lastSubmittedCodeRef.current = null;
			onChange("");
			onBack();
		};
		return /* @__PURE__ */ u("div", {
			class: "IncodeOtpInputActions",
			children: /* @__PURE__ */ u("p", {
				class: `IncodeOtpInputResendText ${disabled ? "IncodeOtpInputResendTextDisabled" : ""}`,
				"data-testid": "otp-resend-section",
				children: [
					t("otp.didYouNotGetIt"),
					/* @__PURE__ */ u("button", {
						type: "button",
						class: "IncodeOtpInputLink",
						onClick: handleResend,
						disabled: disabled || !canResend,
						"data-testid": "otp-resend",
						children: t("otp.resendCode")
					}),
					` ${t("otp.or")} `,
					/* @__PURE__ */ u("button", {
						type: "button",
						class: "IncodeOtpInputLink",
						onClick: handleBack,
						disabled,
						"data-testid": "otp-back",
						children: t(backLinkText)
					})
				]
			})
		});
	};
	return /* @__PURE__ */ u("div", {
		class: `IncodeOtpInput IncodeOtpInputComposed`,
		children: [
			/* @__PURE__ */ u("div", {
				ref: liveRef,
				class: "IncodeSrOnly",
				"aria-live": "polite",
				"aria-atomic": "true"
			}),
			/* @__PURE__ */ u(InputComposed, {
				id: "otp-code",
				type: "text",
				inputMode: "text",
				ref: inputRef,
				maxLength: otpLength,
				value,
				error: displayedError,
				onInput: handleChange,
				onBlur: onValidate,
				onPaste: handlePaste,
				disabled: disabled || isLoading,
				required: true,
				autocomplete: "one-time-code",
				"data-testid": "otp-input-0",
				"aria-label": t("otp.verificationCode"),
				class: "IncodeOtpSingleInput",
				showErrorIcon: true
			}),
			/* @__PURE__ */ u(Spacer, {}),
			/* @__PURE__ */ u(Button, {
				onClick: handleSubmitClick,
				disabled: disabled || isLoading || !isValid,
				isLoading,
				"data-testid": "otp-submit",
				children: t("common.continue")
			}),
			/* @__PURE__ */ u(Spacer, { size: 12 }),
			renderActions()
		]
	});
};
//#endregion
export { OtpInput as t };
