import { useEffect, useState } from "react"
import { Table } from "../common/table"
import { transactionsCol } from "../../utility/transactions"
import { getTransactionsList } from "../../services/api/transactions"
import { useMutation } from "@tanstack/react-query"
import { TransactionsResponse } from "../../types"
import { useParamsStore } from "../../store/params"
import { handleError } from "../../utility/error-handle"

export const Transactions = () => {
    const { params } = useParamsStore()
    const [data, setData] = useState<TransactionsResponse>({
        data: [],
        total: 0
    })
    const { mutate, isPending } = useMutation({
        mutationFn: getTransactionsList
    })
    useEffect(() => {
        mutate({
            ...params
        },
            {
                onSuccess: (res: any) => {
                    setData({
                        data: res?.data?.data,
                        total: res?.data?.total
                    })
                },
                onError: (err: any) => {
                    handleError(err)
                }
            })
    }, [mutate, params])
    return (
        <Table columns={transactionsCol} data={data?.data} isLoading={isPending} totalData={data?.total} />
    )
}