"use client"

import Button from "@/components/ui/Button"
import InputField from "@/components/ui/Input"
import { useForm } from "react-hook-form"
import { yupResolver } from "@hookform/resolvers/yup"
import { useRouter } from "next/navigation"
import { ROUTES } from "@/utils/Routing"
import * as yup from "yup"
import { useAuthStore } from "@/zustand/auth/useAuthStore"
import { encrypt } from "@/utils/Crypto"
import { LRFFlowContent } from "@/types/staticContent/lrfflow.content.type"
import { useEffect } from "react"

type ForgotPasswordValues = {
  email: string
}

function ForgotPasswordForm({ staticContent }: { staticContent: LRFFlowContent["FORGOT_PASSWORD"] }) {
  const router = useRouter()
  const { forgotPassword, isLoading, language } = useAuthStore()

  const forgotPasswordSchema = yup.object({
    email: yup
      .string()
      .required(staticContent.FORM.EMAIL_REQUIRED)
      .matches(
        /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/,
        staticContent.FORM.EMAIL_INVALID
      ),
  })
  const {
    register,
    handleSubmit,
    getValues,
    reset,
    formState: { errors },
  } = useForm<ForgotPasswordValues>({
    resolver: yupResolver(forgotPasswordSchema),
  })
  useEffect(() => {
    // Forces form to re-validate with new resolver
    reset(
      {
        email: getValues("email"),
      },
      { keepValues: true, keepDirty: true }
    )
  }, [language, reset, getValues])
  const onSubmit = (data: ForgotPasswordValues) => {
    forgotPassword({ email: data.email }, (success) => {
      if (!success) return
      router.push(
        `${ROUTES.VERIFY_YOUR_EMAIL}?email=${encodeURIComponent(
          encrypt(data.email)
        )}&type=forgot`
      )
    }, true)
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <InputField
        type="email"
        label={staticContent.FORM.EMAIL_ADDRESS}
        placeholder={staticContent.FORM.ENTER_EMAIL}
        {...register("email")}
        error={errors.email}
      />

      <Button type="submit" variant="primary" isLoading={isLoading}>
        {staticContent.FORM.SUBMIT_BUTTON}
      </Button>


    </form>
  )
}

export default ForgotPasswordForm