import React, { useState } from 'react'
import { handlePagingFunc } from '../../../Pagination/HandlePagination';
import PaginatedList  from '../../../Pagination/PaginatedList';

export default function RelativeTable({relativeList}) {
  
    // Handle Pagination
    const [currentPage, setCurrentPage] = useState(0);
    const indexOfFirstItem = Number(currentPage);
    const indexOfLastItem =Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);

    const currentRelativeList = relativeList?.slice(indexOfFirstItem, indexOfLastItem);
  
    const handlePagination = (e) => {
      handlePagingFunc(e, setCurrentPage);
    };
   
    return (
        <div className={`w-full overflow-hidden rounded-2xl`}>
            <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between min-h-[400px]">
              <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
                <tbody>
                  <>
                    {relativeList && relativeList?.length > 0 ? (
                        currentRelativeList.map((value, index) => (
                        <tr key={value.uid || index} className="border-b dark:border-[#5356fb29] hover:bg-gray-50">
                          <td className='p-2'>
                            <div className="flex flex-col">
                              <h1 className="font-bold text-xl text-dark-gray dark:text-white">
                                {value.firstname && value.firstname} {value.lastname && value.lastname}
                              </h1>
                              <span className="text-sm text-thin-light-gray">
                                {value.email && value.email}
                              </span>
                            </div>
                          </td>
                          <td className='p-2'>
                            {/* <span>Family Type</span> */}
                            <span>{value.family_type && value.family_type.toUpperCase()}</span>
                          </td>
                          <td className='p-2 text-right'>
                            {value.status && value.status}
                          </td>
                        </tr>
                        ))
                    ) : (
                      <tr className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
                        <td className="p-2">No Members 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) >=
                  relativeList?.length
                    ? true
                    : false
                }
                data={relativeList}
                start={indexOfFirstItem}
                stop={indexOfLastItem}
              />
              {/* END OF PAGINATION BUTTON */}
            </div>
        </div>
      );
    };