import React, {useState} from 'react'

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

function RecentActivityTable({payment}) {

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

  return (
    <div className='flex flex-col justify-between h-full'>
    <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">Date</th>
                <th className="p-4">Trx.</th>
            <th className="p-2">Amnt./Fee</th>
            <th className="p-2">Status</th>
            </tr>
        </thead>
        {payment.data.length ?
        (
        <tbody>
            {currentActivity.map((item, index) => (
            <tr key={index} className='text-slate-500'>
                <td className="p-2">{item.trx_date}</td>
                <td className="p-4" dangerouslySetInnerHTML={{__html:item.recipient}}></td>
                <td className="p-2">{item.amount}<br />{item.fee}</td>
                <td className="p-2">{item.status}</td>
            </tr>
            ))}
        </tbody>
        )
        :
        payment.error ? 
        (
        <tbody>
            <tr className='text-slate-500'>
                <td className="p-2" colSpan={4}>Opps! an error occurred. Please try again!</td>
            </tr>
        </tbody>
        )
        :
        <tbody>
            <tr className='text-slate-500'>
                <td className="p-2" colSpan={4}>No Payment History Found!</td>
            </tr>
        </tbody>
        }
    </table>

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

export default RecentActivityTable