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


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

  const whichActivityPerform = ( actvity ) =>
  {
    switch (actvity) {
      case 1:
        return "IN"
        break;
        case 2:
          return "Requested"
        break;
        case 3:
          return "Deleted"
        break;
        case 4:
          return "OUT"
        break;
        case 5:
          return "Regularized"
          break;
    
      default:
        break;
    }
  }

  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: '15%'}}>Time</th>
                <th style={{ width: '20%' }}>Activity</th>
            <th style={{ width: '20%' }}>Date</th>
            <th style={{ width: '45%' }}>Description</th>
          </tr>
        </thead>
        <tbody>
              {logs
                .slice()
                .sort((a, b) => b.id - a.id)
                .map((log, index) => (
                  <tr key={index}>
                    <td>{convertShortTime( log.activityTime )}</td>
                    <td>{whichActivityPerform(log.activity)}</td>
                    <td>{log.activityTime.slice(0, 10)}</td>
                    <td className="text-wrap" colSpan={3}>
                      {log?.comment}
                    </td>
                  </tr>
                ))}
            </tbody>
      </table>
        </>
      )
    }

    </div>
  );
};

export default AttendLogs;