import React, { useEffect, useState } from 'react';
import Avatar from '../common/Avatar';
import { convertShortTime } from '../../utils/dateUtils';
import RegularizationActions from './RegularizationActions';
import {useSelector} from 'react-redux';
import {useRegularizationRequests} from '../../hooks/useAttendance';
import moment from 'moment';


const Regularization = ( { handleRequest} ) =>
{
  var selectedProject = useSelector((store) => store.localVariables.projectId);  
  const [ regularizesList, setregularizedList ] = useState( [] )
  const { regularizes, loading,error,refetch} = useRegularizationRequests(selectedProject)
  
  

   useEffect(()=>{
    setregularizedList(regularizes)
   },[regularizes])
 
  return (
          <div className="table-responsive text-nowrap">
            <table className="table mb-0">
              <thead>
                <tr>
                  <th colSpan={2}>Name</th>
                  <th>Date</th>
                  <th><i className='bx bxs-down-arrow-alt text-success' ></i>Check-In</th>
                  <th><i className='bx bxs-up-arrow-alt text-danger' ></i>Check-Out</th>
                  <th>Action</th>
                </tr>
              </thead>
        <tbody>
          
          {loading &&<td colSpan={5}>Loading...</td>}
                {
                  regularizes?.length > 0 ? (
                    regularizes?.map((att, index) => (
                      <tr key={index}>
                        <td colSpan={2}>
                             <div className="d-flex justify-content-start align-items-center">
                                  <Avatar
                                    firstName={att.firstName}
                                    lastName={att.lastName}
                                  ></Avatar>
                                  <div className="d-flex flex-column">
                                    <a
                                      href="#" 
                                      className="text-heading text-truncate"
                                    >
                                      <span className="fw-medium">
                                        {att.firstName} {att.lastName}
                                      </span>
                                    </a>                             
                                  </div>
                              </div>
                        </td>
                        <td>{moment(att.checkOutTime).format("DD-MMM-YYYY")}</td>
                        <td>{convertShortTime(att.checkInTime)}</td>
                        <td>{att.checkOutTime ? convertShortTime(att.checkOutTime):"--"}</td>
                        <td className='text-center ' >
                        {/* <div className='d-flex  justify-content-center align-items-center gap-3'> */}
                          <RegularizationActions attendanceData={att} handleRequest={handleRequest} refresh={refetch } />
                        {/* </div> */}
                        </td>
                      </tr>
                    ))
                  ):(
                    <td colSpan={5}>No Record Found</td>
                  )
                }
              </tbody>
            </table>
          </div>
  );
};

export default Regularization