import { FC } from "react"
import { DialogComponent } from "../common/dialog"
import { Trash } from "iconsax-react"
import { useMutation, useQueryClient } from "@tanstack/react-query"
import { deleteCardMutation } from "../../services/api/bank-card"
import toast from "react-hot-toast"
import { ButtonComponent } from "../common/button"

type Props = {
    isOpen: boolean,
    close: () => void,
    id: string | number | null
}

export const DeleteCardDialog: FC<Props> = ({ isOpen, close, id }) => {
    const queryClient = useQueryClient()

    const { mutate, isPending } = useMutation({
        mutationFn: deleteCardMutation
    })
    const handleDeleteSelectedCard = async () => {
        await mutate({
            id
        }, {
            onSuccess: () => {
                toast.success("کارت مورد نظر با موفقیت حذف شد")
                queryClient.invalidateQueries({ queryKey: ["bank-card"] })
                close()
            },
            onError: () => toast.error("حذف کارت نا موفق")
        })
    }
    return (
        <DialogComponent isOpen={isOpen} close={close} title="حذف حساب بانکی" subTitle="از حذف حساب بانکی مربوطه اطمینان دارید؟" icon={<Trash color="#11212D" className="size-[50px]" />}>
            <div className="flex flex-col gap-[6px] mt-10">
                <ButtonComponent title="حذف" onClick={handleDeleteSelectedCard} pending={isPending} />
                <ButtonComponent title="لغو" onClick={close} theme="glass" />
            </div>
        </DialogComponent>
    )
}