import React,{useState}from "react";
import moment from "moment";
import Avatar from "../common/Avatar";
import { convertShortTime } from "../../utils/dateUtils";
import RenderAttendanceStatus from "./RenderAttendanceStatus";
import usePagination from "../../hooks/usePagination";
import { useNavigate } from "react-router-dom";


const Attendance = ( {attendance, getRole, handleModalData} ) =>
{

  const { currentPage, totalPages, currentItems, paginate } = usePagination(attendance, 5);
  const [loading,setLoading] = useState(false);
  const navigate = useNavigate()
  
  return (
    <> 
     <div className="table-responsive text-nowrap">
              {attendance && attendance.length > 0 ? (<>
                <table className="table ">
                  <thead >
                    <tr>
                      <th className="border-top-0" colSpan={2}>Name</th>
                      <th className="border-top-0">Role</th>
                      <th className="border-top-0"><i className='bx bxs-down-arrow-alt text-success' ></i>Check-In</th>
                      <th className="border-top-0"><i className='bx bxs-up-arrow-alt text-danger' ></i>Check-Out</th>
                      <th className="border-top-0">Actions</th>
                    </tr>
                  </thead>
                  <tbody className="table-border-bottom-0">
                    {currentItems &&
                currentItems
                .sort((a, b) => {
                  // If checkInTime exists, compare it, otherwise, treat null as earlier than a date
                  const checkInA = a.checkInTime ? new Date(a.checkInTime) : new Date(0);
                  const checkInB = b.checkInTime ? new Date(b.checkInTime) : new Date(0);
                  return checkInB - checkInA; // Sort in descending order of checkInTime
                })
                  .map( ( item ) => (
                        <tr key={item.employeeId}>
                          <td colSpan={2}>
                            <div className="d-flex justify-content-start align-items-center">
                              <Avatar
                                firstName={item.firstName}
                                lastName={item.lastName}
                              ></Avatar>
                              <div className="d-flex flex-column">
                                <a
                                  onClick={(e) =>navigate(`/employee/${item.employeeId}?for=attendance`)}
                                  className="text-heading text-truncate cursor-pointer"
                                >
                                  <span className="fw-medium">
                                    {item.firstName} {item.lastName}
                                  </span>
                                </a>                             
                              </div>
                            </div>
                          </td>
                         
                          <td>
                            {/* <span className="badge  bg-label-primary me-1">
                              {getRole(item.roleID)}
                            </span> */}
                        ---
                          </td>
                         <td>{item.checkInTime ? convertShortTime(item.checkInTime):"--"}</td>
                         <td>{item.checkOutTime ? convertShortTime(item.checkOutTime):"--"}</td>

                          <td className="text-center" >    
                          <RenderAttendanceStatus attendanceData={item} handleModalData={handleModalData} Tab={1} currentDate={null}/>
                          </td>
                        </tr>
                      ))}
                  </tbody>
                
                </table>



{
  !loading && (
    <nav aria-label="Page " >
    <ul className="pagination pagination-sm justify-content-end py-1">
         <li className={`page-item  ${currentPage === 1 ? 'disabled' : ''}`}>
             <button className="page-link btn-xs" onClick={() => paginate(currentPage - 1)}>&laquo;</button>
         </li>
        {[...Array(totalPages)].map((_, index) => (
           <li key={index} className={`page-item ${currentPage === index + 1 ? 'active' : ''}`}>
              <button className="page-link " onClick={() => paginate(index + 1)}>
               {index + 1}
              </button>
           </li>
        ))}
        <li className={`page-item ${currentPage === totalPages ? 'disabled' : ''}`}>
            <button className="page-link " onClick={() => paginate(currentPage + 1)}>&raquo;</button>
       </li>
   </ul>
  </nav>
  )
}

            </>  ) : (
                <span>No employees assigned to the project</span>
              )}
      </div>
 
    </>
  );
};

export default Attendance;