import { useRef, useState } from "react"

import Link from "next/link";
import { Button } from "@mui/material";
import OTPForm from "./element/OTPForm";
import EditLogin from "../icons/EditLogin";
import RetryLogin from "../icons/RetryLogin";
import ArrowRightS from "../icons/ArrowRightS";

const time_resend_code = 120;

function SetCodePage({ setIsSendMsg, link, setStep }) {

    const retryIcon = useRef();

    const [timer, setTimer] = useState(0);

    const handleTimer = () => {
        setTimer('loading');
        setTimeout(() => {
            setTimer(time_resend_code);
            let timePresent = time_resend_code;
            const timerInterval = setInterval(() => {
                timePresent--;
                setTimer(timePresent);

                !timePresent && clearInterval(timerInterval)
            }, 1000);
        }, 1000);
    }

    const handleOTP = (e) => {
        e.target.nextElementSibling &&
            e.target.nextElementSibling.focus()
    }

    return (
        <div className='rounded-[16px] mt-[51px] sm:mt-[45px] md:mt-[39px] lg:mt-[32px] border border-solid sm:border-[#EFEFEF] bg-transparent sm:bg-[#FFF] 
        p-0 border-transparent sm:p-[40px] sm:pb-[48px] w-full sm:w-fit sm:min-w-[425px]'>
            <div
                className="cursor-pointer"
                onClick={() => {
                    setStep && setStep(prev => prev - 1)
                    setIsSendMsg && setIsSendMsg(false)
                }}
            >
                <ArrowRightS />
            </div>
            <p className='text-[#525252] mt-[10px] sm:mt-[12px] md:mt-[14px] lg:mt-[16px] text-[18px] font-bold'>کد تایید را وارد نمایید</p>
            <p className='text-[#616161] mt-[16px] sm:mt-[19px] md:mt-[22px] lg:mt-[24px] text-[14px] font-normal text-right'>
                کد تایید برای شماره 09013261200 ارسال شد.
            </p>
            <div className='mt-[26px] sm:mt-[28px] md:mt-[30px] lg:mt-[32px] mb-[56px] sm:mb-[47px] md:mb-[38px] lg:mb-[30px]'>
                <div className="w-full mb-[27px] flex items-center justify-center gap-2 sm:gap-6" dir='ltr'>
                    <OTPForm handleOTP={handleOTP} />
                    <OTPForm handleOTP={handleOTP} />
                    <OTPForm handleOTP={handleOTP} />
                    <OTPForm handleOTP={handleOTP} />
                    <OTPForm handleOTP={handleOTP} />
                </div>
                {/* <Button className="flex items-center justify-start gap-1">
                    <p className="text-[#F17732] text-[14px] font-medium">دریافت مجدد کد تایید</p>
                    <ArrowLeftOrangeS />
                </Button> */}
                <div className='flex w-full items-center justify-between flex-wrap gap-y-5'>

                    <Button
                        className='flex !p-1 items-center justify-start gap-1 cursor-pointer'
                        onClick={() => {
                            setStep && setStep(prev => prev - 1)
                            setIsSendMsg && setIsSendMsg(false)

                        }}
                    >
                        <EditLogin />
                        <p className='text-[#F17732] text-[14px] font-normal select-none'>ویرایش شماره موبایل</p>
                    </Button>

                    <Button
                        className='flex !p-1 items-center justify-start gap-1 hover-rotate-90 cursor-pointer'
                        // sx={{ '&.MuiButton-root:hover': { bgcolor: 'transparent' } }}
                        disabled={typeof timer === 'number' && timer !== 0}
                        onClick={() => {
                            if (!timer && timer !== 'loading') {
                                handleTimer();

                                // Rotate Retry Icon
                                retryIcon.current.classList.add('retry-icon');

                                // Remove Style Rotate Icon
                                setTimeout(() => {
                                    retryIcon.current &&
                                        retryIcon.current.classList.remove('retry-icon');
                                }, 1000);
                            }
                        }}
                    >
                        {timer && (timer !== 'loading') ? (
                            <p className='text-[#F17732] text-[14px] font-normal select-none'>{timer} ثانیه</p>
                        ) : (
                            <>
                                <div ref={retryIcon}>
                                    <RetryLogin />
                                </div>
                                <p className='text-[#F17732] text-[14px] font-normal select-none'>دریافت مجدد کد</p>
                            </>
                        )}
                    </Button>
                </div>
            </div>
            <Link
                href={link || ''}
                onClick={e => !link && e.preventDefault()}
            >
                <Button
                    fullWidth
                    variant='contained'
                    onClick={() => {
                        setIsSendMsg && setIsSendMsg(true)
                        setStep && setStep(prev => prev + 1)
                    }}
                    className='!rounded-[8px] !bg-[#5559CE]'
                >تایید</Button>
            </Link>
        </div>
    )
}

export default SetCodePage