import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useEffect, useRef } from 'react';
import './OtpVerification.scss';
import Icon from '../Icon';
import Typography from '../Typography';
import Modal from '../Modal';
import Button from '../Button';
const OTP_LENGTH = 6;
const OtpVerification = ({ handleClose, handleResend, handleOtp, resendTimeout = 30, }) => {
    const [otp, setOtp] = useState(Array(OTP_LENGTH).fill(''));
    const [countdown, setCountdown] = useState(resendTimeout);
    const [isResendDisabled, setIsResendDisabled] = useState(true);
    const inputRefs = useRef(Array(OTP_LENGTH).fill(null));
    useEffect(() => {
        if (!isResendDisabled) {
            inputRefs.current[0]?.focus();
        }
    }, [isResendDisabled]);
    useEffect(() => {
        let timer;
        if (countdown > 0) {
            timer = window.setInterval(() => setCountdown((prev) => prev - 1), 1000);
        }
        if (countdown === 0) {
            setIsResendDisabled(false);
        }
        return () => clearInterval(timer);
    }, [countdown]);
    const handleKeyDown = (e, index) => {
        const { key } = e;
        if (/^[0-9]$/.test(key)) {
            e.preventDefault();
            const newOtp = [...otp];
            newOtp[index] = key;
            setOtp(newOtp);
            if (index < OTP_LENGTH - 1) {
                inputRefs.current[index + 1]?.focus();
            }
        }
        else if (key === 'Backspace') {
            e.preventDefault();
            const newOtp = [...otp];
            newOtp[index] = '';
            setOtp(newOtp);
            if (index > 0) {
                inputRefs.current[index - 1]?.focus();
            }
        }
    };
    const handlePaste = (e) => {
        e.preventDefault();
        const pastedData = e.clipboardData.getData('text').replace(/\D/g, '').slice(0, OTP_LENGTH);
        const newOtp = Array(OTP_LENGTH).fill('');
        pastedData.split('').forEach((char, i) => {
            newOtp[i] = char;
        });
        setOtp(newOtp);
        const nextFocusIndex = Math.min(pastedData.length, OTP_LENGTH - 1);
        inputRefs.current[nextFocusIndex]?.focus();
    };
    const handleResendClick = () => {
        setCountdown(resendTimeout);
        setIsResendDisabled(true);
        setOtp(Array(OTP_LENGTH).fill(''));
        handleResend();
    };
    return (_jsx(Modal, { isOpen: true, onClose: handleClose, isFooterDisplayed: false, isHeaderDisplayed: false, zIndex: 999999, customWidth: "340px", children: _jsxs("div", { className: "ff-otp-popup", children: [_jsxs("div", { className: "ff-otp-header", children: [_jsx(Typography, { fontSize: 24, lineHeight: "36px", fontWeight: "semi-bold", children: "OTP Verification" }), _jsx(Icon, { name: "close", height: 16, width: 16, onClick: handleClose, className: "ff-close-icon" })] }), _jsx("div", { className: "ff-otp-boxes", children: otp.map((value, index) => (_jsx("input", { type: "text", maxLength: 1, className: `ff-otp-input ${value ? 'filled' : ''} ${index === otp.findIndex((val) => val === '') ? 'active' : ''}`, value: value, onKeyDown: (e) => handleKeyDown(e, index), onPaste: handlePaste, ref: (el) => (inputRefs.current[index] = el), readOnly: true }, index))) }), _jsx(Button, { variant: "primary", label: "Submit", onClick: () => handleOtp(otp.join('')), disabled: otp.includes(''), className: "ff-submit-btn" }), _jsxs("div", { className: `ff-resend ${isResendDisabled ? 'disabled' : ''}`, onClick: isResendDisabled ? undefined : handleResendClick, children: ["Re-send OTP", countdown > 0 ? ` (${countdown}s)` : ''] })] }) }));
};
export default OtpVerification;
//# sourceMappingURL=OtpVerification.js.map