import { CardAdd } from "iconsax-react"
import { DialogComponent } from "../common/dialog"
import { FC } from "react"
import { Input } from "../common/input"
import { Controller, SubmitHandler, useForm } from "react-hook-form"
import { AddNewCartInterface } from "../../types"
import { yupResolver } from "@hookform/resolvers/yup"
import { AddNewCardSchema } from "../../schema"
import { ErrorComponent } from "../common/error"
import { useMutation, useQueryClient } from "@tanstack/react-query"
import { createNewCardMutation } from "../../services/api/bank-card"
import toast from "react-hot-toast"
import { ButtonComponent } from "../common/button"

type Props = {
    isOpen: boolean,
    close: () => void
}
export const AddNewCardDialog: FC<Props> = ({ isOpen, close }) => {
    const queryClient = useQueryClient()
    const { mutate, isPending } = useMutation({
        mutationFn: createNewCardMutation
    })
    const { handleSubmit, formState: { errors }, control } = useForm<AddNewCartInterface>({
        resolver: yupResolver(AddNewCardSchema)
    })
    const createNewCard: SubmitHandler<AddNewCartInterface> = async (data) => {
        mutate({
            holderName: `${data?.name} ${data?.family}`,
            PAN: data?.PAN,
            IBAN: data?.IBAN,
        }, {
            onSuccess: () => {
                toast.success("کارت با موفقیت اضافه شد")
                queryClient.invalidateQueries({ queryKey: ["bank-card"] })
                close()
            },
            onError: () => {
                toast.error("کارت با موفقیت اضافه نشد")
            }
        })
    }
    return (
        <DialogComponent isOpen={isOpen} close={close} title="ایجاد حساب بانکی جدید" subTitle="لطفا اطلاعات را با دقت وارد نمایید" icon={<CardAdd color="#11212D" className="size-[50px]" />}>
            <form onSubmit={handleSubmit(createNewCard)} className="flex flex-col gap-[42px] mt-9">
                <div className="w-full flex flex-col gap-6">
                    <Controller control={control} name="name" render={({ field }) => (
                        <div>
                            <Input placeholder="نام صاحب کارت" field={field} className="bg-auth-form" />
                            <ErrorComponent show={errors.name} message={errors.name?.message} />
                        </div>
                    )} />
                    <Controller control={control} name="family" render={({ field }) => (
                        <div>
                            <Input field={field} placeholder="نام خانوادگی صاحب کارت" className="bg-auth-form" />
                            <ErrorComponent show={errors.family} message={errors.family?.message} />
                        </div>
                    )} />
                    <Controller control={control} name="PAN" render={({ field }) => (
                        <div>
                            <Input field={field} placeholder="شماره کارت" className="bg-auth-form" />
                            <ErrorComponent show={errors.PAN} message={errors.PAN?.message} />
                        </div>
                    )} />
                    <Controller control={control} name="IBAN" render={({ field }) => (
                        <div>
                            <Input field={field} placeholder="شماره شبا" className="bg-auth-form" />
                            <ErrorComponent show={errors.IBAN} message={errors.IBAN?.message} />
                        </div>
                    )} />
                </div>
                <div className="flex flex-col gap-[6px]">
                    <ButtonComponent title="افزودن کارت" pending={isPending} type="submit" />
                    <ButtonComponent title="لغو" type="button" theme="glass" onClick={close} />
                </div>
            </form>
        </DialogComponent>
    )
}