import { useEffect, useState } from "react"
import { BankCartInterface } from "../../types"
import { bankCarts } from "../../utility/cart"
import { BankCart } from "./bank-cart"
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"

export const ManagementBankAccounts = () => {
    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)

    useEffect(() => {
        console.log("data =>", data)
    }, [data])

    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} />
                {bankCarts?.map((item: BankCartInterface) => <BankCart key={item?.id} item={item} handleOpenDeleteDialog={handleOpenDeleteDialog} />)}
            </div>
            <AddNewCardDialog isOpen={showDialog} close={handleCloseDialog} />
            <DeleteCardDialog isOpen={showDeleteDialog} close={handleCloseDeleteDialog} />
        </>
    )
}