import { useState } from "react"
import { CardBank } from "../../types"
import { CreateNewCart } from "./create-new-cart"
import { AddNewCardDialog } from "./add-new-cart-dialog"
import { DeleteCardDialog } from "./delete-card"
import { useQuery } from "@tanstack/react-query"
import { getUserCardsList } from "../../services/api/bank-card"
import { BankCart } from "./bank-cart"

export const ManagementBankAccounts = () => {
    const [selectedCard, setSelectedCard] = useState<string | number | null>(null)
    const { data, isLoading } = useQuery({
        queryKey: ["bank-card"],
        queryFn: getUserCardsList
    })
    const [showDialog, setShowDialog] = useState<boolean>(false)
    const handleCloseDialog = () => setShowDialog(false)
    const handleOpenDialog = () => setShowDialog(true)
    const [showDeleteDialog, setShowDeleteDialog] = useState<boolean>(false)
    const handleOpenDeleteDialog = () => setShowDeleteDialog(true)
    const handleCloseDeleteDialog = () => setShowDeleteDialog(false)

    if (isLoading) return <p>LOADING...</p>
    return (
        <>
            <div className="w-full grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 gap-6">
                <CreateNewCart handleOpenDialog={handleOpenDialog} />
                {data?.data?.cardBank?.map((item: CardBank) => <BankCart key={item?.id} item={item} handleOpenDeleteDialog={handleOpenDeleteDialog} setSelectedCard={setSelectedCard} />)}
            </div>
            <AddNewCardDialog isOpen={showDialog} close={handleCloseDialog} />
            <DeleteCardDialog isOpen={showDeleteDialog} close={handleCloseDeleteDialog} id={selectedCard} />
        </>
    )
}