import React, { useEffect, useState } from "react";
import Link from "next/link";
import MobileMenu from "../components/header/MobileMenu";
import DefaulHeader2 from "../components/header/DefaulHeader2";
import { useForm } from "react-hook-form";
import { useReqForgetPassword } from "../utils/hooks";
import useShowToast from "../hooks/useShowToast";
import UseFullScreenLoader from "../hooks/UseFullScreenLoader";

const LoginForm = () => {
    const {
        register, 
        handleSubmit, 
        reset, 
        watch,
        formState: { 
            errors 
        }
    } = useForm();

    const [loadingAndResponse, setLoadingAndResponse] = useState<LoadingAndUimessage>({
        loading: false,
        uiMessage: '',
        success: false
    });

    const sendMailForgotPassword = async (data:any) => {
        try{
            setLoadingAndResponse({
                ...loadingAndResponse,
                loading: true
            })
            const  forgetPassword = (await useReqForgetPassword(
                data.email
            )) as ForgetPasswordResp;

            setLoadingAndResponse({
                loading: false,
                uiMessage: forgetPassword.resp.message,
                success: forgetPassword.resp.success
            })
        } catch (err) {
            setLoadingAndResponse({
                uiMessage: 'Email not found or Something Went wrong. Please try again',
                loading: false,
                success: false
            })
        }
    }

    useEffect(() => {
        if(loadingAndResponse.loading === false && loadingAndResponse.uiMessage !== '') {
            useShowToast({ message: loadingAndResponse.uiMessage })
        }
    },[loadingAndResponse])

    return (
        <>
        {
                loadingAndResponse.loading && (
                    <UseFullScreenLoader text={"Please Hang on..."} />
                )
            }
            {/* <ToastContainer /> */}
            <DefaulHeader2 />
            {/* <!--End Main Header -->  */}

            <MobileMenu />
            {/* End MobileMenu */}

            <div className="login-section">
                <div
                    className="image-layer"
                    style={{ backgroundImage: "url(/images/background/12.jpg)" }}
                ></div>
                <div className="outer-box">
                    {/* <!-- Login Form --> */}
                    <div className="login-form default-form">
                        <div className="form-inner">
                        {
                            !loadingAndResponse.loading && loadingAndResponse.uiMessage !== '' && (
                                <div className="alert alert-warning alert-dismissible fade show" role="alert">
                                    <p>
                                        {loadingAndResponse.success ? 
                                        loadingAndResponse.uiMessage + ', Check Your Email For Reset Link' : 
                                        loadingAndResponse.uiMessage}
                                    </p>
                                    <button type="button" className="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                </div>
                            )
                        }    

                            <h3>Forgotten Password?</h3>

                            <form method="post" action={'/reset-password'} onSubmit={handleSubmit(sendMailForgotPassword)}>
                                <div className="col-md-12 mt-2">
                                    <div className="form-group">
                                        <label>Enter Email</label>
                                        <input
                                            type="email"
                                            placeholder="Enter Registered Email"
                                            {...register("email", { 
                                                required: true,
                                                pattern: /^[^@ ]+@[^@ ]+\.[^@ .]{2,}$/,
                                            })}
                                        />
                                        {
                                            errors.email && errors.email.type === "required" && (
                                                <p className="text-danger">Email is required</p>
                                            )
                                        }
                                        {
                                            errors.email && errors.email.type === "pattern" && (
                                                <p className="text-danger">Please Enter a valid Email Address</p>
                                            )
                                        }
                                    </div>
                                </div>
                                <div className="col-md-12 mt-4">
                                    <div className="form-group d-flex justify-content-end align-items-center">
                                        <button className="theme-btn btn-style-one  mb-0" type="submit">
                                            Submit
                                        </button>
                                    </div>
                                </div>
                                {/* login */}
                            </form>
                            <div className="bottom-box">
                                <div className="text">
                                    Password remembered?{" "}
                                    <Link href="/login" className="call-modal login">
                                        Login
                                    </Link>
                                </div>
                            </div>
                            {/* End bottom-box LoginWithSocial */}
                        </div>
                    </div>
                    {/* <!--End Login Form --> */}
                </div>
            </div>
            {/* <!-- End Info Section --> */}
        </>
    );
};

export default LoginForm;