import React, {useState} from 'react'

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

function ReferralTable({history}) {

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

  return (
    <div className='flex flex-col justify-between h-full'>
        <table className="referral-list w-full table-auto border-collapse text-left">
            <thead className='border-b-2'>
                <tr className='text-slate-600'>
                <th className="p-3">Added/Name</th>
                <th className="p-3">Email</th>
                <th className="p-3">Status</th>
                </tr>
            </thead>
            <tbody>
                {history.data.length ? 
                currentReferral.map((item, index) => (
                    <tr key={index} className='text-slate-500'>
                        <td className="p-3">{item.added_date} / {item.firstname} {item.lastname}</td>
                        <td className="p-3">{item.email}</td>
                        <td className="p-3">{item.status}</td>
                    </tr>
                ))
                :
                (
                history.error ?
                <tr className='text-slate-500'>
                    <td colSpan={3}>Opps! couldn't get referral history. Try reloading the page</td>
                </tr>
                :
                (
                <tr className='text-slate-500'>
                    <td colSpan={3}>No Item Found on referral List</td>
                </tr>
                )
                )
                }
            </tbody>
        </table>

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

export default ReferralTable