import styles from '@/app/styles/module/login.module.scss';
import { useTranslations } from 'next-intl';
import { ChangeEvent, MouseEvent, useActionState, useState, useEffect } from 'react';
import { resendConfirmEmail, confirmEmail } from '@/app/actions/auth';
import { IconRefresh } from '@/app/ui/icons/icons';
export default function ConfirmMailModalWindow({ userId, email }: { userId: number | undefined, email: string | undefined }) {
	const [stateEmailConfrim, formActionEmailConfrim, isPendingEmailConfrim] = useActionState(
		confirmEmail,
		undefined,
	);
	const [confirmCodeValue, setConfirmCodeValue] = useState('');
	const [isInputDisabled, setIsInputDisabled] = useState(true);
	const [timer, setTimer] = useState(30);
	const t = useTranslations('Login-register-form');

	async function reSendEmailConfirmCode(e: MouseEvent) {
		e.preventDefault();
		if (userId) {
			await resendConfirmEmail(userId);
		}
	}

	function onChangeHandler(e: ChangeEvent<HTMLInputElement>) {
		const newValue = e.target.value.replace(/([^0-9])/g, '');
		if (newValue.length <= 6) {
			setConfirmCodeValue(newValue);
		}
	}

	useEffect(() => {
		let interval: NodeJS.Timeout;

		if (timer > 0 && isInputDisabled) {
			interval = setInterval(() => {
				setTimer(prev => {
					if (prev <= 1) {
						setIsInputDisabled(false);
						return 0;
					}
					return prev - 1;
				});
			}, 1000);
		}

		return () => {
			if (interval) clearInterval(interval);
		};
	}, [timer, isInputDisabled]);

	/* const resetTimer = () => {
		setIsInputDisabled(true);
		setTimer(30);
	}; */

	return (
		<div
			className="modal-window"
			onClick={(e) => e.stopPropagation()}
		>
			<div className={`${styles['form-group']} ${styles['form-group-confrim-window']}`}>
				<form action={(e) => {
					formActionEmailConfrim(e);
				}}>
					<div className={`${styles['form-group']}`}>
						<h4>
							{t('enter-confirmation-code')}
							<br />
						</h4>
						<p
							className="mb-6"
						>
							{email}
						</p>
						<input
							type="text"
							id="emailConfirm"
							name="emailConfirm"
							className={`${styles['form-input']}`}
							placeholder={t('confirmation-code')}
							value={confirmCodeValue}
							onChange={(e: ChangeEvent<HTMLInputElement>) => {
								onChangeHandler(e)
							}}
						/>
						<input
							type="hiden"
							id="userId"
							name="userId"
							style={{ display: 'none' }}
							defaultValue={userId ? userId : ''}
						/>
						{stateEmailConfrim?.error && (
							<p
								className="text-sm text-red-500"
							>
								{t('entered-code-is-incorrect')}
							</p>
						)}
					</div>
					<div>
						{stateEmailConfrim?.error}
					</div>
					<div className="flex gap-2">
						<button
							type="submit"
							className={`${styles['btn']}`}
							disabled={confirmCodeValue.length !== 6}
						>
							{t('confirm')}
						</button>
						<button
							className={`${styles['btn'] + ' ' + styles['refresh']} flex`}
							disabled={isInputDisabled}
							onClick={(e) => {
								reSendEmailConfirmCode(e);
							}}
							title={t('resend-code')}
						>
							<IconRefresh />
							{timer !== 0 ? timer : ''}
						</button>
					</div>
				</form>
			</div>
		</div>
	)
}