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;
