import React, { act, useEffect, useState } from 'react'
import useAttendanceStatus, { ACTIONS } from '../../hooks/useAttendanceStatus';
// import AttendanceRepository from '../../repositories/AttendanceRepository';
import { useDispatch, useSelector } from 'react-redux';
import { usePositionTracker } from '../../hooks/usePositionTracker';
import {markCurrentAttendance} from '../../slices/apiSlice/attendanceAllSlice';
import {cacheData, getCachedData} from '../../slices/apiDataManager';
import showToast from '../../services/toastService';


const RegularizationActions = ({attendanceData,handleRequest,refresh}) => {
const [status,setStatus] = useState()
const [loadingApprove,setLoadingForApprove] = useState(false)
const [loadingReject,setLoadingForReject] = useState(false)

const projectId = useSelector((store)=>store.localVariables.projectId)
const {latitude,longitude} = usePositionTracker();
const dispatch = useDispatch()

  const handleRegularization =(request_attendance,IsReqularize)=>{
 
    if(IsReqularize){
      setLoadingForApprove(true)
    }else{
      setLoadingForReject(true)
    }
  //  setLoading(true)
    let req_Data = {
      id:request_attendance.id || null,
      description: ` ${IsReqularize ? "Approved" : "Rejected"}! regularization request`,
      employeeId:request_attendance?.employeeId,
      projectId:projectId,
      date:new Date().toISOString(),
      markTime:new Date().toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit" }),
      latitude:latitude.toString(),
      longitude: longitude.toString(),
      action:IsReqularize ? 4 : 5,
      image:null 
    }
  
    dispatch( markCurrentAttendance( req_Data ) ).then( ( action ) =>
    {

      const regularizedList = getCachedData("regularizedList")
      
      const updatedata = regularizedList?.data?.filter( item => item.id !== action.payload.id );
     
      cacheData("regularizedList",{data:updatedata,projectId:projectId})
      setLoadingForApprove( false )
      setLoadingForReject( false )
      refresh()
   }).catch( ( error ) =>
    {
      showToast(error.message,"error")
  });
    
    
  }

  useEffect(()=>{
    const  {activity,checkInTime,checkOutTime} = attendanceData;
      if (activity === 2 && checkInTime !== null ||  checkOutTime !== null) {
        setStatus({
          status: "Approve",
          action: ACTIONS.APPROVED,
          disabled: false,
          text: "Approve",
          color: 'btn-success',
        });
      }
  },[attendanceData])


  return (
    <div className="w-auto d-flex gap-2 align-items-center justify-content-end">
   {attendanceData.activity == 2 && (  
    <>
      <button
        type="button"
        className={`btn btn-success btn-${loadingApprove ? "sm":"xs"} ${status?.color}`}
        tabIndex="0"
        aria-controls="DataTables_Table_0"
        data-bs-toggle="modal"
        data-bs-target="#check-Out-modal"
        onClick={()=>handleRegularization(attendanceData,true)}
        disabled={status?.disabled || loadingApprove} 
      >
        {loadingApprove ? (
          <>
            <span className="spinner-border spinner-border-md" role="status" aria-hidden="true"></span>
            <span className="visually-hidden">Loading...</span>
          </>
        ) : (
          status?.text
        )}
      </button>
   
      <button
        type="button"
        className={`btn btn-danger btn-${loadingReject ? "sm":"xs"} ${status?.color}`}
        tabIndex="0"
        aria-controls="DataTables_Table_0"
        data-bs-toggle="modal"
        onClick={()=>handleRegularization(attendanceData,false)}
        disabled={status?.disabled || loadingReject} 
      >
        {loadingReject ? (
          <>
            <span className="spinner-border spinner-border-md" role="status" aria-hidden="true"></span>
            <span className="visually-hidden">Loading...</span>
          </>
        ) : (
          "Reject"
        )}
      </button>
      </>
    )}
  </div>
  )
}

export default RegularizationActions