import React, {useState} from 'react'

import PaginatedList from '../../Pagination/PaginatedList';
import { handlePagingFunc } from '../../Pagination/HandlePagination';

function PurchasesTable({purchase}) {

    const [currentPage, setCurrentPage] = useState(0);
    const indexOfFirstItem = Number(currentPage);
    const indexOfLastItem = Number(indexOfFirstItem)+Number(process.env.REACT_APP_ITEM_PER_PAGE);
    const currentPurchase = purchase?.data?.slice(indexOfFirstItem, indexOfLastItem);
  
    const handlePagination = (e) => {
      handlePagingFunc(e,setCurrentPage)
    }

  return (
    <div className='flex flex-col justify-between min-h-[500px]'>
        {purchase.data.length ?
        <table className="wallet-activity w-full table-auto border-collapse text-left">
            <thead className='border-b-2'>
                <tr className='text-slate-600'>
                <th className="p-2">Trx.</th>
                <th className="p-2">Amount</th>
                <th className="p-2">Fee</th>
                </tr>
            </thead>
            <tbody>
                {currentPurchase.map((item, index) => (
                <tr key={index} className='text-slate-500'>
                    <td className="p-2">{item.added_date}<br />
                    <b>{item.confirmation} </b>
                    </td>
                    <td className="p-2">{item.amount}</td>
                    <td className="p-2">{item.fee}</td>
                </tr>
                ))}
            </tbody>
        </table>
        :purchase.error ?
        <div className="p-2 text-slate-500 flex flex-col grow justify-center items-center">
            <span>Opps! an error occurred. Please try again!</span>
        </div>
        :
        <div className="p-2 text-slate-500 flex flex-col grow justify-center items-center">
            <span>No Purchase History Found!</span>
        </div> 
        }

    {/* PAGINATION BUTTON */}
    <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= purchase?.data?.length ? true : false} data={purchase?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
    {/* END OF PAGINATION BUTTON */}
    </div>
  )
}

export default PurchasesTable