nodeMap/utils/setupPOIs.js

// utils/setupPOIs.js
import { findClosestPoints } from "./geometryUtils";
import handlePoiSelect from "./handlePoiSelect";
import { updateLocationInDatabaseService } from "../services/database/updateLocationInDatabaseService";
import { handleEditPoi, insertNewPOI, removePOI } from "./poiUtils";
import { parsePoint } from "./geometryUtils";
import circleIcon from "../components/gisPolylines/icons/CircleIcon";
import startIcon from "../components/gisPolylines/icons/StartIcon";
import endIcon from "../components/gisPolylines/icons/EndIcon";
import { redrawPolyline } from "./polylines/redrawPolyline";
import { openInNewTab } from "../utils/openInNewTab";
import { disablePolylineEvents, enablePolylineEvents } from "./polylines/setupPolylines"; // Importiere die Funktionen
import { setSelectedPoi, clearSelectedPoi } from "../redux/slices/selectedPoiSlice";
import { useDispatch } from "react-redux";

export const setupPOIs = async (
  map,
  pois,
  poiData,
  poiTypMap,
  userRights,
  poiLayerRef,
  setSelectedPoi,
  setLocationDeviceData,
  setDeviceName,
  setCurrentPoi,
  poiLayerVisible,
  fetchPoiData,
  toast,
  setShowPoiUpdateModal,
  setCurrentPoiData,
  deviceName,
  dispatch
) => {
  const editMode = localStorage.getItem("editMode") === "true"; // Prüfen, ob der Bearbeitungsmodus aktiv ist
  userRights = editMode ? userRights : undefined; // Nur Berechtigungen anwenden, wenn editMode true ist

  if (map && poiLayerRef.current) {
    map.removeLayer(poiLayerRef.current);
    poiLayerRef.current = new L.LayerGroup().addTo(map);

    for (const poi of pois) {
      try {
        const { latitude, longitude } = parsePoint(poi.position);
        const poiTypName = poiTypMap.get(poi.idPoiTyp) || "Unbekannt";
        const canDrag = userRights ? userRights.some((r) => r.IdRight === 56) : false;

        const matchingIcon = poiData.find((poi) => poi.idPoi === poi.idPoi);
        const iconUrl = matchingIcon ? `/img/icons/pois/${matchingIcon.path}` : "/img/icons/pois/default-icon.png";

        const marker = L.marker([latitude, longitude], {
          icon: L.icon({
            iconUrl: iconUrl,
            iconSize: [25, 41],
            iconAnchor: [12, 41],
            popupAnchor: [1, -34],
          }),
          draggable: canDrag,
          id: poi.idPoi,
          name: poi.name,
          description: poi.description,
          idLD: poi.idLD,
          idPoiTyp: poi.idPoiTyp,
          link: poi.link,
        });

        // Nur das Kontextmenü "POI Bearbeiten" hinzufügen, wenn editMode true ist
        if (editMode) {
          marker.bindContextMenu({
            contextmenu: true,
            contextmenuWidth: 140,
            contextmenuItems: [
              {
                text: "POI Bearbeiten",
                icon: "/img/poi-edit.png",
                callback: () => handleEditPoi(marker, userRights, setCurrentPoiData, setShowPoiUpdateModal, fetchPoiData, toast),
              },
            ],
          });
        }

        marker.bindPopup(`
          <div>
            <b class="text-xl text-black-700">${poi.description || "Unbekannt"}</b><br>
            ${deviceName || "unbekannt"} <br>
            ${poiTypName}<br>
          </div>
        `);

        marker.on("mouseover", function () {
          console.log("Device Name in setupPOIs.js :", marker); // Debugging
          dispatch(setSelectedPoi(poi)); // POI in Redux setzen

          handlePoiSelect(
            {
              id: poi.idPoi,
              deviceId: poi.idLD,
              idPoiTyp: poi.idPoiTyp,
              typ: poiTypName,
              description: poi.description,
              idLD: poi.idLD,
            },
            setSelectedPoi,
            setLocationDeviceData,
            setDeviceName, // Stelle sicher, dass dies korrekt funktioniert
            poiLayerRef,
            poiTypMap
          );

          localStorage.setItem("lastElementType", "marker");
          localStorage.setItem("markerLink", this.options.link);
        });

        marker.on("mouseout", function () {
          dispatch(clearSelectedPoi()); // POI aus Redux entfernen
          this.closePopup();
        });

        marker.on("dragend", (e) => {
          console.log("Marker wurde verschoben in setupPOIs");
          if (canDrag) {
            const newLat = e.target.getLatLng().lat;
            const newLng = e.target.getLatLng().lng;
            const markerId = e.target.options.id;
            updateLocationInDatabaseService(markerId, newLat, newLng).then(() => {});
          } else {
            console.error("Drag operation not allowed");
          }
        });

        if (poiLayerVisible) {
          marker.addTo(poiLayerRef.current);
        }
      } catch (error) {
        console.error("Error processing a location:", error);
      }
    }
  }
};