import React, { useEffect, useState } from 'react';
import useAttendanceStatus from "../../hooks/useAttendanceStatus";


const RenderAttendanceStatus = ({ attendanceData, handleModalData,Tab,currentDate}) => {

  const { text, color, disabled, action,checkInTime } = useAttendanceStatus(attendanceData);

  const handleButtonClick = (key) => {
  
    if(key === 6){
      handleModalData({action:6,id:attendanceData?.id}) 
    }else{   
      
    handleModalData({
      forWhichTab:Tab,
      action,               
      employeeId: attendanceData?.employeeId,
      id: attendanceData?.id,
      currentDate,
      checkInTime: attendanceData.checkInTime,
      checkOutTime:attendanceData.checkOutTime
    });
  }
  };


  return (
    <div className="d-flex justify-content-end">
      <button
        type="button"
        className={`btn btn-xs ${color}`}  
        tabIndex="0"
        aria-controls="DataTables_Table_0"
        data-bs-toggle="modal"
        data-bs-target="#check-Out-modal" 
        onClick={handleButtonClick}      
        disabled={disabled}               
      >
        {text}  
      </button> 
      {attendanceData?.checkInTime   && (  
        <button
          type="button"
          className="btn btn-xs btn-secondary ms-2"
          tabIndex="0"
          aria-controls="DataTables_Table_0"
          data-bs-toggle="modal"
          onClick={()=>handleButtonClick(6)}
        >
          View
        </button>
      )}
    </div>
  );
};

export default RenderAttendanceStatus;