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

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

    const currentSelectedList = selectedList?.slice(indexOfFirstItem, indexOfLastItem);
  
    const handlePagination = (e) => {
      handlePagingFunc(e, setCurrentPage);
    };

    const [deletePopout, setDeletePopout] = useState({
        status: false,
        data: {}
    })

    const handleDeleteMember = (item) => {
        setDeletePopout({
            status: true,
            data: {...item}
        })
    }
   
    return (
        <div className={`w-full p-8 bg-white dark:bg-dark-gray overflow-hidden rounded-2xl section-shadow`}>
            <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>
                  <>
                    {selectedList && selectedList?.length > 0 ? (
                        currentSelectedList.map((value, index) => (
                        <tr key={value.uid} className="bg-white dark:bg-dark-white border-b dark:border-[#5356fb29] hover:bg-gray-50">
                          {/* <td className="p-1">{value?.firstname}</td>
                          <td className="p-1">{value?.lastname}</td>
                          <td className="p-1">{value?.email}</td>
                          <td className="p-1 text-right">
                            <button onClick={()=>{handleDeleteMember(value)}} className='rounded-lg text-sm bg-red-500 hover:bg-red-400 text-white font-bold py-1 px-2.5'>X</button>
                          </td> */}
                          <td className='py-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='py-2 text-right'>
                            <button onClick={()=>{handleDeleteMember(value)}} className='rounded-lg text-sm bg-red-500 hover:bg-red-400 text-white font-bold py-1 px-2.5'>X</button>
                          </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) >=
                  selectedList?.length
                    ? true
                    : false
                }
                data={selectedList}
                start={indexOfFirstItem}
                stop={indexOfLastItem}
              />
              {/* END OF PAGINATION BUTTON */}
            </div>
    
          {/* DELETE MEMBER POPOUT */}
          {deletePopout.status &&
                <DeleteMember 
                    action={()=>setDeletePopout({status:false, data:{}})}
                    situation={deletePopout.status}
                    details={deletePopout.data}
                />
            }
          {/* END OF DELETE MEMBER POPOUT */}
        </div>
      );
    };
