
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, useProjects} from "../../hooks/useProjects";
import {useHasUserPermission} from "../../hooks/useHasUserPermission";
import {MANAGE_PROJECT_INFRA} from "../../utils/constants";
import {useDispatch, useSelector} from "react-redux";
import {useProfile} from "../../hooks/useProfile";
import {setProjectId} from "../../slices/localVariablesSlice";
import InfraTable from "../Project/Infrastructure/InfraTable";


const InfraPlanning = () =>
{
  const {profile: LoggedUser} = useProfile()
  const dispatch = useDispatch()
  const {projects,loading:project_listLoader,error:projects_error} = useProjects()

  const selectedProject = useSelector((store)=>store.localVariables.projectId)
  const ManageInfra = useHasUserPermission( MANAGE_PROJECT_INFRA )
  const {projects_Details, loading: project_deatilsLoader, error: project_error} = useProjectDetails(selectedProject)
  useEffect( () =>
  {
    dispatch(setProjectId(projects[0]?.id))
  })

  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" }}>
        <div className="align-items-center">
            <div className="row ">
              <div className="col-sm-3 col-8 text-start mb-1">
                   <select name="DataTables_Table_0_length"
                                aria-controls="DataTables_Table_0"
                                className="form-select form-select-sm"
                                value={selectedProject}
                                onChange={(e)=>dispatch(setProjectId(e.target.value))}
                                aria-label=""
                   >
                                 {(project_listLoader || projects.length < 0) && <option value="Loading..." disabled>Loading...</option>  }
                  
                                  {!project_listLoader && projects?.filter(project =>
                                    LoggedUser?.projects?.map(Number).includes(project.id)).map((project)=>(
                                     <option value={project.id}>{project.name}</option>
                                  ))} 
                      </select>
              </div>
            {/* <div className={`col-12 text-end mb-1 ${!ManageInfra && 'd-none'} `} >
              <button
                type="button"
                className="link-button link-button-sm m-1 "
                data-bs-toggle="modal"
                data-bs-target="#building-model"
                // onClick={() => openBuildingModel()}
              >
                <i className="bx bx-plus-circle me-2"></i>
                Manage Building
              </button>
              <button
                type="button"
                data-bs-toggle="modal"
                className="link-button m-1"
                data-bs-target="#floor-model"
                // onClick={() => openFloorModel()}
              >
                <i className="bx bx-plus-circle me-2"></i>
                Manage Floors
              </button>

              <button
                type="button"
                data-bs-toggle="modal"
                className="link-button m-1"
                data-bs-target="#work-area-model"
                // onClick={() => openWorkAreaModel()}
              >
                <i className="bx bx-plus-circle me-2"></i>
                Manage Work Areas
              </button>
              <button
                type="button"
                data-bs-toggle="modal"
                className="link-button m-1"
                data-bs-target="#task-model"
                // onClick={() => openTaskModel()}
              >
                <i className="bx bx-plus-circle me-2"></i>
                Manage Tasks
              </button>
            </div> */}
          </div>
            <div className="row ">
              {project_deatilsLoader && ( <p>Loading...</p> )}
              {( !project_deatilsLoader && projects_Details?.buildings.length === 0 ) && ( <p>No Result Found</p> )}
              

              
              {(!project_deatilsLoader && projects_Details?.buildings?.length > 0) && (<InfraTable buildings={projects_Details?.buildings}/>)}
          </div>
        </div>
      </div>
    </div>
  </div>
  );
};

export default InfraPlanning;
