"use client"
import sendChangePassword from "@/app/api-requests/sendChangePassword"
import Input from "@/components/ui/Input"
import MainButton from "@/components/ui/MainButton"
import PasswordInput from "@/components/ui/PasswordInput"
import { Form } from "@/components/ui/form"
import TranslateClient from "@/components/ui/localization/TranslateClient"
import { toast } from "@/components/ui/use-toast"
import { AuthFormState } from "@/modules/authentication/authFormState"
import { zodResolver } from "@hookform/resolvers/zod"
import { useEffect } from "react"
import { useForm } from "react-hook-form"
import { z } from "zod"

type Props = {
  setFormState: React.Dispatch<React.SetStateAction<AuthFormState>>
  token: string
}

const formSchema = z
  .object({
    password: z.string().min(8),
    password_confirmation: z.string().min(8),
  })
  .refine((data) => data.password === data.password_confirmation, {
    message: "password is not matched",
    path: ["password_confirmation"],
  })

const ChangePasswordForm = ({ setFormState, token }: Props) => {
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      password: "",
      password_confirmation: "",
    },
  })
  const { data, isLoading, mutate } = sendChangePassword()
  function onSubmit({
    password,
    password_confirmation,
  }: z.infer<typeof formSchema>) {
    mutate({
      password,
      password_confirmation,
      token,
    })
  }
  useEffect(() => {
    if (data) {
      if (!data?.errors) {
        setFormState("login")
        toast({
          title: "success",
          description: "password changed successfully",
          className: "bg-green-700 text-white rounded-xl",
        })
      }
    }
  }, [data])

  return (
    <Form {...form}>
      <form
        onSubmit={form.handleSubmit(onSubmit)}
        className="space-y-4 capitalize mt-8"
      >
        <PasswordInput form={form}/>
        <Input
          type="password"
          form={form}
          name="password_confirmation"
          placeholder="password confirmation"
          label="password confirmation"
        />
        <MainButton
          intent={isLoading ? "loading" : "primary"}
          type="submit"
          size="sm"
          fullWidth
          className="!mt-10"
        >
          <TranslateClient text="submit" />
        </MainButton>
      </form>
    </Form>
  )
}

export default ChangePasswordForm