import React, { useEffect, useState } from 'react';
import Avatar from '../common/Avatar';
import { convertShortTime } from '../../utils/dateUtils';
import RegularizationActions from './RegularizationActions';


const  Regularization = ({attendance,handleRequest}) => {
  const[attendances,setAttendances] = useState(attendance)
   const regularize_Requests = attendances.filter((att)=>att.activity === 2)
  

   useEffect(()=>{
    setAttendances(attendance)
   },[attendance])
    
  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>
                {
                  regularize_Requests.length > 0 ? (
                    regularize_Requests?.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>{att.date}</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} />
                        {/* </div> */}
                        </td>
                      </tr>
                    ))
                  ):(
                    <td colSpan={5}>No Result Found</td>
                  )
                }
              </tbody>
            </table>
          </div>
  );
};

export default Regularization
