import React from 'react'
import { getDashPayments } from '../../services/services'
import { useQuery } from '@tanstack/react-query'
import queryKeys from '../../services/queryKeys'
import getDateTimeFromDateString from '../../helpers/getDateTimeFromDateString'
import getImage from '../../utils/getImage'

export default function DashPayments() {

    
    const {data, isFetching, isError, error} = useQuery({
        queryKey: queryKeys.dash_payments,
        queryFn: () => {
            let reqData = {
                token: localStorage.getItem('token'), // USER TOKEN
                uid: localStorage.getItem('uid') // USER UID
            }
            return getDashPayments(reqData)
        }
    })

    const payments = data?.data?.member_payments
    // console.log('data', payments)

  return (
    <>
        <div className="col-xxl-4 m-b-30" style={{minHeight: '300px'}}>
            <div className="card card-statistics h-100 mb-0 panel_round_c3">
                <div className="card-header d-flex justify-content-between">
                    <div className="card-heading">
                        <h4 className="card-title">Payments</h4>
                    </div>
                </div>
                <div className="overflow-y-auto card-body scrollbar scroll_dark pt-0" style={{maxHeight: '350px'}}>
                    <div className="datatable-wrapper table-responsive">
                    {isFetching ? 
                        <>
                            <div className="col-12">
                                <div className="p-4">
                                    <p className='text-mute'>Loading...</p>
                                </div>
                            </div>
                        </>
                        : isError ?
                        <div className="col-12">
                            <div className="p-4">
                                <p className='text-danger'>{error.message}</p>
                            </div>
                        </div>
                        :
                        <table id="datatable" className="table table-borderless table-striped">
                            <thead>
                            <tr>
                                {/* <th style={{width: '30px'}}>#</th> */}
                                <th>Date</th>

                                <th  style={{width: '130px'}}>Description</th>
                                <th  style={{width: '80px'}}>Amount</th>
                            </tr>
                            </thead>
                            <tbody>
                                {payments.length > 0 ? 
                                payments.map((item, index) => {
                                    return (
                                        <tr key={index}>
                                            {/* <td>{Number(item?.id).toString().padStart(6,'0')}</td> */}
                                            <td>
                                                {getDateTimeFromDateString(item?.added)}
                                            </td>

                                            <td>{item?.option_name}</td>
                                            <td className='text-right'>${item?.amount}</td>
                                        </tr>
                                    )
                                })
                                :
                                    <td colSpan={3} className='text-center'>No record found</td>
                                }
                            </tbody>
                        </table>
                    }
                    </div>
                </div>
            </div>
        </div>
    </>
  )
}