import React, { useEffect, useState } from 'react'
import { useEmployeeAttendacesLog } from '../../hooks/useAttendance';
import { convertShortTime } from '../../utils/dateUtils';


const AttendLogs = ({ Id }) => {
  
  const {logs, loading} = useEmployeeAttendacesLog( Id )

  return (
    <div className="table-responsive">
    {loading && <p>Loading..</p>}
      { logs && logs.length > 0 && (
        <>
        <div className="d-flex justify-content-start align-items-center gap-2 my-1">
        <div className="align-item-center">
          <p className="p-0 m-0">Date : {logs[0].activityTime.slice(0,10)} </p>
        </div>
      </div>

      <table className="table table-sm mb-0">
        <thead>
          <tr>
            <th style={{ width: '20%' }}>Time</th>
            <th style={{ width: '20%' }}>Date</th>
            <th style={{ width: '60%' }}>Description</th>
          </tr>
        </thead>
        <tbody>
              {logs
                .slice()
                .sort((a, b) => new Date(b.activityTime) - new Date(a.activityTime))
                .map((log, index) => (
                  <tr key={index}>
                    <td>{convertShortTime(log.activityTime)}</td>
                    <td>{log.activityTime.slice(0, 10)}</td>
                    <td className="text-wrap" colSpan={3}>
                      {log?.comment}
                    </td>
                  </tr>
                ))}
            </tbody>
      </table>
        </>
      )
    }

    </div>
  );
};

export default AttendLogs;


