marco.pms.web/src/components/Project/Infrastructure/InfraTable.jsx

import { useCallback, useEffect, useState } from "react";
import Building from "./Building";
import Floor from "./Floor";
import FloorModel from "./FloorModel";
import showToast from "../../../services/toastService";
import ProjectRepository from "../../../repositories/ProjectRepository";
import eventBus from "../../../services/eventBus";
import { cacheData, clearCacheKey } from "../../../slices/apiDataManager";

const InfraTable = ({ buildings, projectId }) => {
  const [projectBuilding, setProjectBuilding] = useState([]);
  const [expandedBuildings, setExpandedBuildings] = useState([]);
  const [showFloorModal, setShowFloorModal] = useState(false);
  const [selectedBuilding, setSelectedBuilding] = useState(null);
  const [clearTrigger, setClearTrigger] = useState(false);

  const toggleBuilding = (buildingId) => {
    setExpandedBuildings((prevExpanded) =>
      prevExpanded.includes(buildingId)
        ? prevExpanded.filter((id) => id !== buildingId)
        : [...prevExpanded, buildingId]
    );
  };

  const handleAddFloor = (building) => {
    setSelectedBuilding(building);
    setShowFloorModal(true);
  };

  const handleFloorSubmit = async (data) => {
    try {
      const payload = [
        {
          building: null,
          floor: {
            id: data.id || null,
            floorName: data.floorName,
            buildingId: data.buildingId,
          },
          workArea: null,
        },
      ];

      const res = await ProjectRepository.manageProjectInfra(payload);

      if (res?.success) {
        showToast("Floor saved successfully!", "success");

        // Find and update the correct building
        const updatedBuildings = projectBuilding.map((b) => {
          if (b.id === parseInt(data.buildingId)) {
            const newFloor = {
              id: res.data?.[0]?.floor?.id || Math.random(),
              floorName: res.data?.[0]?.floor?.floorName || data.floorName,
              workAreas: [],
            };

            return {
              ...b,
              floors: [...(b.floors || []), newFloor],
            };
          }
          return b;
        });

        setProjectBuilding(updatedBuildings);
        setShowFloorModal(false);
        setClearTrigger(true);
      } else {
        showToast("Failed to save floor", "error");
      }
    } catch (err) {
      showToast("Error occurred while saving floor", "error");
    }
  };

  const handleClearComplete = () => {
    setClearTrigger(false);
  };

  const getContent = (building) => {
    return building.floors?.length > 0 ? (
      building.floors.map((floor) => (
        <Floor
          key={floor.id}
          forBuilding={building}
          floor={floor}
          workAreas={floor.workAreas}
        />
      ))
    ) : (
      <tr>
        <td colSpan="4">
          <div className=" mb-0" role="alert">
            <p className="fw-semibold">
              No floors have been added yet. Start by adding floors to manage
              this building.
            </p>
            {/* <button
              type="button"
              className="btn btn-xs btn-primary"
              onClick={() => handleAddFloor(building)}
            >
              <i className="bx bx-plus-circle me-2"></i>
              Add Floors
            </button> */}
          </div>
        </td>
      </tr>
    );
  };
  useEffect(() => {
    if (buildings && buildings.length > 0) {
      setProjectBuilding(buildings);
      setExpandedBuildings([buildings[0].id]);
    }
  }, [buildings]);

  const handler = useCallback(
    (msg) => {
      console.log(msg.projectIds.some((item) => item == projectId));
      if (msg.projectIds.some((item) => item == projectId)) {
        console.log("caling APi");
        try {
          clearCacheKey("projectInfo");
          ProjectRepository.getProjectByprojectId(projectId)
            .then((response) => {
              console.log("API Called");
              cacheData("projectInfo", {
                projectId: projectId,
                data: response.data,
              });

              // console.log(response?.data?.buildings);
              setProjectBuilding(response?.data?.buildings);
              showToast(msg.message,"info")
            })
            .catch((error) => {
              console.error(error);
            });
        } catch (e) {
          console.error(error);
        }
      }
    },
    [buildings]
  );
  useEffect(() => {
    eventBus.on("infra", handler);
    return () => eventBus.off("infra", handler);
  }, [handler]);

  return (
    <div>
      {projectBuilding && projectBuilding.length > 0 && (
        <table className="table table-bordered">
          <tbody>
            {projectBuilding.map((building) => (
              <Building
                key={building.id}
                building={building}
                toggleBuilding={toggleBuilding}
                expandedBuildings={expandedBuildings}
                getContent={getContent}
              />
            ))}
          </tbody>
        </table>
      )}
      {showFloorModal && selectedBuilding && (
        <div
          className="modal fade show"
          id="floor-model"
          tabIndex="-1"
          style={{ display: "block" }}
          aria-modal="true"
          role="dialog"
        >
          <FloorModel
            project={{
              buildings: [selectedBuilding],
            }}
            onClose={() => setShowFloorModal(false)}
            onSubmit={handleFloorSubmit}
            onClearComplete={handleClearComplete}
          />
        </div>
      )}
    </div>
  );
};

export default InfraTable;