"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, useSearchParams } from "next/navigation"
import { ROUTES } from "@/utils/Routing"
import * as yup from "yup"
import { useAuthStore } from "@/zustand/auth/useAuthStore"
import { decrypt } from "@/utils/Crypto"
import { useEffect, useLayoutEffect } from "react"
import { LRFFlowContent } from "@/types/staticContent/lrfflow.content.type"

type ResetPasswordValues = {
  password: string
  confirmPassword: string
}

function ResetPasswordForm({ staticContent }: { staticContent: LRFFlowContent["RESET_PASSWORD"] }) {
  const router = useRouter()
  const { resetPassword, isLoading, language } = useAuthStore()
  const searchParams = useSearchParams()
  const email = searchParams.get('email') || ''
  const decryptedEmail = email ? decrypt(email) : ''

  const resetPasswordSchema = yup.object({
    password: yup
      .string()
      .required(staticContent.FORM.PASSWORD_REQUIRED)
      .min(6, staticContent.FORM.PASSWORD_MIN_LENGTH),
    confirmPassword: yup
      .string()
      .required(staticContent.FORM.CONFIRM_PASSWORD_REQUIRED)
      .oneOf([yup.ref("password")], staticContent.FORM.PASSWORD_NOT_MATCHED),
  })

  const {
    register,
    handleSubmit,
    getValues,
    reset,
    formState: { errors },
  } = useForm<ResetPasswordValues>({
    resolver: yupResolver(resetPasswordSchema),
  })
  useEffect(() => {
    // Forces form to re-validate with new resolver
    reset(
      {
        password: getValues("password"),
        confirmPassword: getValues("confirmPassword"),
      },
      { keepValues: true, keepDirty: true }
    )
  }, [language, reset, getValues])
  useLayoutEffect(() => {
    if (!email) {
      router.push(ROUTES.FORGOT_PASSWORD)
    }
  }, [email, router])

  const onSubmit = (data: ResetPasswordValues) => {

    resetPassword({ new_password: data.password, email: decryptedEmail }, (success) => {
      success && router.push(ROUTES.LOGIN)
    }, true)
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <InputField
        type="password"
        label={staticContent.FORM.NEW_PASSWORD}
        placeholder={staticContent.FORM.ENTER_NEW_PASSWORD}
        {...register("password")}
        error={errors.password}
      />

      <InputField
        type="password"
        label={staticContent.FORM.CONFIRM_PASSWORD}
        placeholder={staticContent.FORM.ENTER_CONFIRM_PASSWORD}
        {...register("confirmPassword")}
        error={errors.confirmPassword}
      />

      <Button type="submit" variant="primary" isLoading={isLoading}>
        {staticContent.RESET_PASSWORD}
      </Button>
    </form>
  )
}

export default ResetPasswordForm