nobat724_front/components/register/SetCodePage.js

import { useRef, useState } from "react";

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";
import { request } from "@/services/response";
import { changeNumToDefault } from "@/helper";

const time_resend_code = 120;

function SetCodePage({ setIsSendMsg, link, num, setStep }) {
  const retryIcon = useRef();

  const [timer, setTimer] = useState(0);
  const [loading, setLoading] = useState(false);
  const [code, setCode] = useState(["", "", "", ""]);
  const [isError, setIsError] = useState(false);
  const inputRefs = Array.from({ length: 5 }, () => useRef());

  const handleChange = (index, val) => {
    const newCode = [...code];

    if (val === "backspace") {
      newCode[index] = "";
      setCode(newCode);
      if (index > 0) {
        inputRefs[index - 1].current?.focus();
      }
      return;
    }

    newCode[index] = val;

    if (newCode.join("").length === 4 && isError) {
      setIsError(false);
    }
    // if (newCode.join("").length === 4) {
    //   handleReq();
    // }

    setCode(newCode);

    if (val && index < inputRefs.length - 1) {
      inputRefs[index + 1].current?.focus();
    }
  };

  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);
  };

  console.log(num);

  const handleReq = () => {
    setLoading(true);
    request
      .getToken(
        "mobile",
        process.env.NEXT_PUBLIC_CLIENT_ID,
        process.env.NEXT_PUBLIC_CLIENT_SECRET,
        changeNumToDefault(num),
        code.join("")
      )
      .then((response) => {
        setLoading(false);
      })
      .catch((err) => {
        setLoading(false);
      });
  };

  return (
    <div
      className="rounded-[16px] opacity-page 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="mb-[27px]" dir="ltr">
          <div
            className="w-full flex items-center justify-center gap-6 sm:gap-6"
            dir="ltr"
          >
            {code.map((digit, index) => (
              <OTPForm
                key={index}
                index={index}
                value={digit}
                isError={isError}
                onChange={handleChange}
                inputRef={inputRefs[index]}
              />
            ))}
          </div>
          <p
            className={`
          text-[#d32f2f] text-[14px] mt-2 min-h-[21px] transition-all duration-1000 ease-in-out
            transform text-right 
            ${!isError ? "opacity-0 -translate-y-1" : "opacity-100 translate-y-0"}
        `}
          >
            !کد را وارد کنید
          </p>
        </div>
        <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"
            disabled={typeof timer === "number" && timer !== 0}
            onClick={() => {
              if (!timer && timer !== "loading") {
                handleTimer();
                retryIcon.current.classList.add("retry-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>
      <Button
        fullWidth
        loading={loading}
        variant="contained"
        onClick={() => {
          setIsSendMsg && setIsSendMsg(true);
          setStep && setStep((prev) => prev + 1);
          if (code.join("").length !== 4) {
            setIsError(true);
          } else {
            handleReq();
          }
        }}
        className="!rounded-[8px] !bg-[#5559CE]"
      >
        تایید
      </Button>
    </div>
  );
}

export default SetCodePage;