import React, { useState } from "react";
import "./forgetPassword.css";
import { Button, Form, Input } from "antd";
import { NavLink } from "react-router-dom";
import { useForgetPassword } from "../../apis/forgetPassword";
import OtpForm from "./otp/OtpForm";
import ChangePassword from "./ChangePassword/ChangePassword";
const activeTabs = ["forget", "otp", "new"];
/**
 * Page for the Forget Password feature.
 * @module ForgetPassword
 * @returns {JSX.Element} The ForgetPassword component.
 */
const ForgetPassword = () => {
  /**
   * States
   */

  /**
   * The currently active tab.
   * @type {string}
   */
  const [active, setActive] = useState(activeTabs[0]);
  /**
   * The email address entered by the user.
   * @type {string}
   */
  const [email, setEmail] = useState("");
  /**
   * The OTP token received after email verification.
   * @type {string}
   */
  const [token, setToken] = useState("");
  /**
   * Custom hook to initiate the password reset process.
   * @type {Object}
   */
  const { mutate: forgetMutate, isLoading: forgetLoading } =
    useForgetPassword();
  /**
   * Handles form submission to initiate the password reset process.
   * @function onFinish
   * @param {Object} values - The form values.
   */
  const onFinish = (values) => {
    forgetMutate(
      { email: values.email },
      {
        onSuccess: (res) => {
          setActive(activeTabs[1]);
          setEmail(values.email);
        },
      }
    );
  };
  /**
   * Determines the active layout based on the current step.
   * @function getActiveLayout
   * @returns {JSX.Element} The active layout component.
   */
  const getActiveLayout = () => {
    switch (active) {
      case activeTabs[1]:
        return (
          <OtpForm
            setActive={setActive}
            activeTabs={activeTabs}
            email={email}
            setToken={setToken}
          />
        );
      case activeTabs[2]:
        return <ChangePassword token={token} />;

      default:
        return (
          <div className="forget_password_wrapper">
            <div className="forget_password_left text-white">
              <div className="forget_password_left_item">
                {/* <h1>PSMS</h1> */}
              </div>
              <div className="forget_password_left_item">
                {/* <img src="/psmsLogo.png" alt="PSMSLOGO" /> */}
                <img src="/forgot.png" alt="" className="auth_img" />
              </div>
              <div className="forget_password_left_item text-center">
                {/* <h4>Reset Your Password</h4> */}
                {/* <div className="text-xs">
                  Lorem ipsum dolor sit, amet consectetur adipisicing elit.
                  Commodi eligendi deleniti possimus soluta reiciendis nihil. Si
                </div> */}
              </div>
            </div>
            <div className="forget_password_right">
              <div className="forget_password_right_item">
                <div className="form_card_heading">
                  <div className="logo_div">
                    <NavLink to="/">
                      <img src="./psmsLogo.png" alt="logo" />
                    </NavLink>
                  </div>
                </div>
                <h4>Forgot Password?</h4>
                <div className="text-xs text-secondary mt-2">
                  Please provide a registered email to get otp
                </div>
              </div>
              <div className="forget_password_right_item mt-1">
                <Form layout="vertical" onFinish={onFinish}>
                  <Form.Item
                    name="email"
                    label="Email"
                    rules={[
                      {
                        required: true,
                        message: "Please input your email!",
                      },
                    ]}
                  >
                    <Input type="email" placeholder="Enter your email." />
                  </Form.Item>
                  <Button
                    type="primary"
                    className="w-100 send_btn"
                    htmlType="submit"
                    loading={forgetLoading}
                  >
                    Send OTP
                  </Button>
                </Form>
              </div>
            </div>
          </div>
        );
    }
  };

  return <div className="forget_password_container">{getActiveLayout()}</div>;
};

export default ForgetPassword;