import { Controller, SubmitHandler, useForm } from "react-hook-form"
import { ResetPasswordUserSchema } from "../../schema"
import { ResetPasswordUser } from "../../types"
import { yupResolver } from "@hookform/resolvers/yup"
import { ErrorComponent } from "../common/error"
import { Input } from "../common/input"
import { ButtonComponent } from "../common/button"
import { useMutation } from "@tanstack/react-query"
import { changeUserPassword } from "../../services/api/user"
import toast from "react-hot-toast"
import { handleError } from "../../utility/error-handle"

export const ResetPasswordBox = () => {
    const { mutate, isPending } = useMutation({
        mutationFn: changeUserPassword,
        mutationKey: ["user-password"]
    })
    const { handleSubmit, formState: { errors }, control } = useForm<ResetPasswordUser>({
        resolver: yupResolver(ResetPasswordUserSchema)
    })

    const handleResetUserPassword: SubmitHandler<ResetPasswordUser> = async (data) => {
        await mutate({
            ...data
        },
            {
                onSuccess: () => {
                    toast.success("تغییر رمز عبور با موفقیت انجام شد")
                },
                onError: (err: any) => {
                    handleError(err)
                }
            })
    }
    return (
        <form className="w-full h-full flex flex-col gap-10" onSubmit={handleSubmit(handleResetUserPassword)}>
            <div className="flex flex-col gap-5 xl:gap-0 xl:flex-row xl:gap-x-10 xl:justify-between items-start">
                <div className="flex flex-col gap-y-5 w-full xl:max-w-fit">
                    <p className="font-medium text-xl text-primary-text-color">تغییر رمز عبور</p>
                    <p className="font-normal text-base text-secondary-text-color text-wrap xl:max-w-xs">
                        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون
                    </p>
                </div>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-[18px] w-full">
                    <Controller name="password" control={control} render={({ field }) => (
                        <div>
                            <Input placeholder="رمز عبور فعلی" type="password" field={field} />
                            <ErrorComponent show={errors.password} message={errors.password?.message} />
                        </div>
                    )} />
                    <div />
                    <Controller name="newPassword" control={control} render={({ field }) => (
                        <div>
                            <Input placeholder="رمز عبور جدید" type="password" field={field} />
                            <ErrorComponent show={errors.newPassword} message={errors.newPassword?.message} />
                        </div>
                    )} />
                    <Controller name="password_confirmation" control={control} render={({ field }) => (
                        <div>
                            <Input placeholder="تکرار رمز عبور" type="password" field={field} />
                            <ErrorComponent show={errors.password_confirmation} message={errors.password_confirmation?.message} />
                        </div>
                    )} />
                </div>
            </div>
            <div className="flex w-full lg:justify-end mt-10">
                <ButtonComponent type="submit" title="تغییر رمز عبور" pending={isPending} className="w-full lg:max-w-fit lg:min-w-72" />
            </div>
        </form>
    )
}