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 min-h-[500px]">
      <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 > 0 ? (
          <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;
