
import React, { useState, useEffect } from "react";
import "../../components/Project/ProjectInfra.css";
import BuildingModel from "../Project/Infrastructure/BuildingModel";
import FloorModel from "../Project/Infrastructure/FloorModel";
import showToast from "../../services/toastService";
import WorkAreaModel from "../Project/Infrastructure/WorkAreaModel";
import TaskModel from "../Project/Infrastructure/TaskModel";
import ProjectRepository from "../../repositories/ProjectRepository";
import Breadcrumb from "../../components/common/Breadcrumb";
import {useProjectDetails, useProjectInfra, useProjects} from "../../hooks/useProjects";
import {useHasUserPermission} from "../../hooks/useHasUserPermission";
import {APPROVE_TASK, ASSIGN_REPORT_TASK, MANAGE_PROJECT_INFRA} from "../../utils/constants";
import {useDispatch, useSelector} from "react-redux";
import {useProfile} from "../../hooks/useProfile";
import {refreshData, setProjectId} from "../../slices/localVariablesSlice";
import InfraTable from "../Project/Infrastructure/InfraTable";


const InfraPlanning = () =>
{
  const {profile: LoggedUser, refetch : fetchData} = useProfile()
  const dispatch = useDispatch()
  const selectedProject = useSelector((store)=>store.localVariables.projectId)
  const {projectInfra, isLoading, error} = useProjectInfra( selectedProject )


  
  const ManageInfra = useHasUserPermission( MANAGE_PROJECT_INFRA )
    const ApprovedTaskRights = useHasUserPermission(APPROVE_TASK)
    const ReportTaskRights = useHasUserPermission(ASSIGN_REPORT_TASK)
  const reloadedData = useSelector( ( store ) => store.localVariables.reload )

  
   useEffect( () =>
   {
     if (reloadedData)
     {
       refetch()
       dispatch( refreshData( false ) )
     }

   },[reloadedData])

  return (
    <div className="col-md-12 col-lg-12 col-xl-12 order-0 mb-4">
    <div className="card">
      <div className="card-body" style={{ padding: "0.5rem" }}>
          {(ApprovedTaskRights || ReportTaskRights) ? (
            <div className="align-items-center">
            <div className="row ">
              {isLoading && ( <p>Loading...</p> )}
              {( !isLoading && projectInfra?.length === 0 ) && ( <p>No Result Found</p> )}
              {(!isLoading && projectInfra?.length > 0) && (<InfraTable buildings={projectInfra} projectId={selectedProject}/>)}
          </div>
        </div>
          ) : (
              <div className="text-center">
                <i className="fa-solid fa-triangle-exclamation fs-5"></i>
                <p>Access Denied: You don't have permission to perform this action. !</p>
              </div>
        )}
      </div>
    </div>
  </div>
  );
};

export default InfraPlanning;
