import { useState } from "react";
import {Link} from "react-router-dom";
import { AuthWrapper } from "./AuthWrapper"
import "./page-auth.css";
import AuthRepository from "../../repositories/AuthRepository";
import showToast from "../../services/toastService";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import {z} from "zod";


const forgotPassSceham = z.object( {
  email: z.string().email(),
} )

const ForgotPasswordPage = () => {

  const[loding,setLoading] = useState(false)

  const {register,
    handleSubmit,
    formState: { errors },
    reset,
    getValues } = useForm( {
    resolver: zodResolver( forgotPassSceham ),
    defaultValues: {
      email:""
    }
  })

  const onSubmit = async (data) =>
  {
    try
    {
      const response = await  AuthRepository.forgotPassword(data)
      if ( response.data && response.success )
      showToast( response.message, "success" )    
      setLoading( false )
      setEmail("")
    } catch ( err )
    {
      showToast( err.response.data, "error" )
      setLoading(false)
    }
  }
  return (
    <AuthWrapper>
      <h4 className="mb-2">Forgot Password? 🔒</h4>
      <p className="mb-4">
        Enter your email and we'll send you instructions to reset your password
      </p>
      <form id="formAuthentication" className="mb-3" onSubmit={handleSubmit(onSubmit)}>
        <div className="mb-3">
          <label htmlFor="email" className="form-label">
            Email
          </label>
          <input
            type="text"
            className="form-control"
            id="email"
            name="email"
            {...register("email")}
            placeholder="Enter your email"
            autoFocus
          />
           {errors.email && (
                      <div
                        className="danger-text text-start"
                        style={{ fontSize: "12px" }}
                      >
                        {errors.email.message}
                      </div>
                    )}
        </div>
        <button aria-label="Click me" className="btn btn-primary d-grid w-100">
          {loding ? "Please Wait...":"Send Reset Link"}
        </button>
      </form>
      <div className="text-center">
        <Link
          aria-label="Go to Login Page"
          to="/auth/login"
          className="d-flex align-items-center justify-content-center"
        >
          <i className="bx bx-chevron-left scaleX-n1-rtl bx-sm"></i>
          Back to login
        </Link>
      </div>
    </AuthWrapper>
  );
};

export default ForgotPasswordPage;