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().trim().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 {
      setLoading(true);
      const response = await AuthRepository.forgotPassword(data);
      if (response.data && response.success)
        showToast(
          "verification email has been sent to your registered email address",
          "success"
        );
      reset();
      setLoading(false);
    } catch (err) {
      reset();
      if (err.response.status === 404) {
        showToast(
          "verification email has been sent to your registered email address",
          "success"
        );
      } else {
        showToast("Something wrong", "error");
      }

      setLoading(false);
    }
  };
  return (
    <div className="col-12 col-lg-5 col-xl-4 d-flex align-items-center p-4 p-sm-5 bg-gray-60">
      <div className="w-100 m-auto" style={{ maxWidth: 420 }}>
        <div className="d-flex align-items-center justify-content-center ">
          <img src="/img/brand/marco.png" width="70" />
          <Link aria-label="Go to Home Page" to="/">
            <span className="app-brand-logo ">
              <span className="text-blue fs-4">OnField</span>
              <span className="text-green fs-4">Work</span>
              <span className="text-dark fs-4">.com</span>
            </span>
            <br />
          </Link>
        </div>
        <h5 className="mb-2 mt-5 ">Forgot Password? </h5>
        <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 text-start">
            <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>

        {/* Footer Text */}
      </div>
    </div>
  );
};

export default ForgotPasswordPage;