import React, { useRef } from "react";
import "./otp.css";
import Button from "../../../component/Button/Button";
import { useVerifyOtp } from "../../../apis/forgetPassword";
/**
 * OtpForm component for handling OTP verification.
 * @module ForgetPassword/OtpForm
 * @param {Object} props - Component props.
 * @param {function} props.setActive - Function to set the active tab.
 * @param {string[]} props.activeTabs - Array of active tabs.
 * @param {string} props.email - The email address for OTP verification.
 * @param {function} props.setToken - Function to set the OTP token.
 * @returns {JSX.Element} The OtpForm component.
 */
const OtpForm = ({ setActive, activeTabs, email, setToken }) => {
  const { mutate, isLoading } = useVerifyOtp();
  const formRef = useRef(null);
  const inputRefs = [
    useRef(null),
    useRef(null),
    useRef(null),
    useRef(null),
    // Add more refs for additional input fields
  ];
  /**
   * Callback function when the OTP form is submitted.
   * @function onSubmit
   * @param {Event} event - The form submit event.
   */
  const onSubmit = (event) => {
    event.preventDefault();
    const formData = new FormData(formRef.current);
    const formValues = Object.fromEntries(formData.entries());
    const otp = String(
      `${formValues.input1}${formValues.input2}${formValues.input3}${formValues.input4}`
    );
    mutate(
      { email, otp },
      {
        onSuccess: (res) => {
          setToken(res?.data?.data?.token);
          setActive(activeTabs[2]);
        },
      }
    );
  };
  /**
   * Handle keyboard navigation between OTP input fields.
   * @function handleKeyDown
   * @param {Event} event - The keyboard event.
   * @param {number} currentIndex - The index of the current input field.
   */
  const handleKeyDown = (event, currentIndex) => {
    const { key } = event;
    if (key === "ArrowRight") {
      event.preventDefault();
      const nextIndex = currentIndex + 1;
      if (nextIndex < inputRefs.length) {
        inputRefs[nextIndex].current.focus();
      }
    } else if (key === "ArrowLeft") {
      event.preventDefault();
      const prevIndex = currentIndex - 1;
      if (prevIndex >= 0) {
        inputRefs[prevIndex].current.focus();
      }
    }
  };
  /**
   * Handle input for the first OTP input field.
   * @function handleInput1
   * @param {Event} e - The input change event.
   */
  const handleInput1 = (e) => {
    const value = e.target.value;
    if (value.length === 1) {
      inputRefs[1].current.focus();
    }
  };
  /**
   * Handle input for the second OTP input field.
   * @function handleInput2
   * @param {Event} e - The input change event.
   */
  const handleInput2 = (e) => {
    const value = e.target.value;
    if (value.length === 1) {
      inputRefs[2].current.focus();
    }
  };
  /**
   * Handle input for the third OTP input field.
   * @function handleInput3
   * @param {Event} e - The input change event.
   */
  const handleInput3 = (e) => {
    const value = e.target.value;
    if (value.length === 1) {
      inputRefs[3].current.focus();
    }
  };

  return (
    <div className="otp_container">
      <form ref={formRef} className="form" onSubmit={onSubmit}>
        {" "}
        <div className="title">OTP</div>{" "}
        <div className="title">Verification Code</div>{" "}
        <p className="message">
          We have sent a verification code to your email
        </p>{" "}
        <div className="inputs">
          <input
            id="input1"
            name="input1"
            type="text"
            min={0}
            max={9}
            pattern="[0-9]"
            maxLength={1}
            ref={inputRefs[0]}
            onChange={handleInput1}
            onKeyDown={(e) => handleKeyDown(e, 0)}
            required
          />{" "}
          <input
            id="input2"
            name="input2"
            type="text"
            min={0}
            max={9}
            pattern="[0-9]"
            maxLength={1}
            ref={inputRefs[1]}
            onChange={handleInput2}
            onKeyDown={(e) => handleKeyDown(e, 1)}
            required
          />{" "}
          <input
            id="input3"
            name="input3"
            type="text"
            min={0}
            max={9}
            pattern="[0-9]"
            maxLength={1}
            ref={inputRefs[2]}
            onChange={handleInput3}
            onKeyDown={(e) => handleKeyDown(e, 2)}
            required
          />{" "}
          <input
            id="input4"
            name="input4"
            type="text"
            min={0}
            max={9}
            pattern="[0-9]"
            maxLength={1}
            ref={inputRefs[3]}
            onKeyDown={(e) => handleKeyDown(e, 3)}
            required
          />{" "}
        </div>{" "}
        <Button className="action" type="submit" loading={isLoading}>
          verify me
        </Button>
      </form>
    </div>
  );
};

export default OtpForm;