import React, {useState} from "react";
import {useQuery} from "@tanstack/react-query";
import {getPaymentReports} from "../../services/services";
import queryKeys from "../../services/queryKeys";

export default function PaymentReportTable() {

    const [page, setPage] = useState(0)

    const {data, isFetching, isError, error} = useQuery({
        queryKey: [...queryKeys.payment_report, page],
        queryFn: () => {
            let reqData = {
                token: localStorage.getItem('token'), // USER TOKEN
                uid: localStorage.getItem('uid'), // USER UID
                page
            }
            return getPaymentReports(reqData)
        },
        staleTime: 0
    })

    // console.log('DATA', data?.data)
    const paymentReportData = data?.data?.payment || []

    return (
        <>
            <div className="row">
                <div className="col-md-12 m-b-30">
                    <div className="d-block d-sm-flex flex-nowrap align-items-center">
                        <div className="page-title mb-2 mb-sm-0">
                            <h4>Payments Report</h4>
                        </div>
                    </div>
                </div>
            </div>
            <div className="row">
                {isFetching ?
                    <>
                        <div className="col-12">
                            <p className='text-mute'>Loading...</p>
                        </div>
                    </>
                    : isError ?
                        <div className="col-12">
                            <p className='text-danger'>{error?.message}</p>
                        </div>
                        :
                        <div className="col-lg-12">
                            <div className="card card-statistics">
                                <div className="card-body">
                                    <div className="export-table-wrapper table-responsive">
                                        <table id="export-table" className="table table-bordered">
                                            <thead className="thead-light">
                                            <tr>
                                                <th>Added</th>
                                                <th>Name</th>
                                                <th>Amount</th>
                                                <th>Status</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                                {paymentReportData.length > 0 ? paymentReportData.map((item, index) => {
                                                    return (
                                                        <tr key={index}>
                                                            <td>{item?.added}</td>
                                                            <td>{item?.option_name}</td>
                                                            <td>{item?.currency}{item?.amount}</td>
                                                            <td>{item?.status}</td>
                                                        </tr>
                                                    )
                                                })
                                                :
                                                <tr>
                                                    <td colSpan={4} className='text-center'>No data found</td>
                                                </tr>
                                                }
                                            </tbody>

                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                }
            </div>
        </>
    )
}