"use client";

import { Button, Image } from "react-bootstrap";
import { FormikContext, useFormik, Form as FormikForm } from "formik";
import * as Yup from "yup";
import { useRouter } from "next/navigation";
import { CxTextInput } from "@/components/default/Field/CxTextInput";
import { useRequest } from "@/components/App/request";
import { toastrC } from "@/utils/helpers";
import { useApp } from "@/components/App";
import styles from "@/styles/Component/Login/Login.module.scss";
const ForgetPassword = () => {
  const { request } = useRequest();
  const router = useRouter();
  const { state, dispatch } = useApp();
  const formik = useFormik({
    initialValues: {
      email: ""
    },
    validationSchema: Yup.object({
      email: Yup.string()
        .email("Invalid email address")
        .required("Email is required")
    }),
    onSubmit: async (values, { setSubmitting }) => {
      try {
        setSubmitting(true);
        const res = await request("FORGOT_PASSWORD", values);
        dispatch({ ...state, email: values.email });
        if (res.status) {
          setTimeout(() => {
            router.push("/auth/otp");
          }, 1000);
        } else {
          toastrC(res.message, "error", "Error");
        }
      } catch (error) {
        toastrC(error.message, "error", "Error");
      } finally {
        console.log("Finally running");
        setSubmitting(false);
      }
    }
  });

  return (
    <div className={styles.LoginCard}>
      <h1>Forgot Password</h1>
      <FormikContext value={formik}>
        <FormikForm onSubmit={formik.handleSubmit}>
          <CxTextInput
            name="email"
            label="Email Address"
            placeholder="Enter your email"
            contClassName="mb-3"
            required={true}
          />
          <Button
            type="submit"
            disabled={formik.isSubmitting}
            className="btn-custom"
          >
            {formik.isSubmitting ? (
              "Submitting ..."
            ) : (
              <>
                Forget Password
                <Image src="../assets/cursor-icon.png" alt="cursor-icon" />
              </>
            )}
          </Button>
        </FormikForm>
      </FormikContext>
    </div>
  );
};

export default ForgetPassword;