nodeMap/utils/mapFeatures.js

// utils/mapFeatures.js
import { findClosestPoints } from "./geometryUtils";
import handlePoiSelect from "./handlePoiSelect";
import { updateLocationInDatabase } from "../services/apiService";
import { handleEditPoi, insertNewMarker, removeMarker } from "./markerUtils";
import { parsePoint } from "./geometryUtils"; // Importiere parsePoint hier
import circleIcon from "../components/gisPolylines/icons/CircleIcon";
import startIcon from "../components/gisPolylines/icons/StartIcon";
import endIcon from "../components/gisPolylines/icons/EndIcon";
import { AddSupportPointIcon, RemoveSupportPointIcon } from "../components/gisPolylines/icons/SupportPointIcons";
import { redrawPolyline } from "./mapUtils";
import { openInNewTab } from "../utils/contextMenuUtils";

export const setupMarkers = async (
  map,
  locations,
  poiData,
  poiTypMap,
  userRights,
  poiLayerRef,
  setSelectedPoi,
  setLocationDeviceData,
  setDeviceName,
  setCurrentPoi,
  poiLayerVisible,
  fetchPoiData,
  toast,
  setShowPoiUpdateModal,
  setCurrentPoiData,
  deviceName
) => {
  if (map && poiLayerRef.current) {
    map.removeLayer(poiLayerRef.current);
    poiLayerRef.current = new L.LayerGroup().addTo(map);

    for (const location of locations) {
      try {
        const { latitude, longitude } = parsePoint(location.position);
        const poiTypName = poiTypMap.get(location.idPoiTyp) || "Unbekannt";
        const canDrag = userRights ? userRights.includes(56) : false;
        const matchingIcon = poiData.find((poi) => poi.idPoi === location.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: location.idPoi,
          name: location.name,
          description: location.description,
        }).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">${location.description || "Unbekannt"}</b><br>
            ${deviceName}<br>
            ${poiTypName}<br>
          </div>
        `);

        marker.on("mouseover", function () {
          handlePoiSelect(
            {
              id: location.idPoi,
              deviceId: location.idLD,
              idPoiTyp: location.idPoiTyp,
              typ: poiTypName,
              description: location.description,
            },
            setSelectedPoi,
            setLocationDeviceData,
            setDeviceName,
            poiLayerRef,
            poiTypMap
          );
          setCurrentPoi(location);
          this.openPopup();

          localStorage.setItem("lastElementType", "marker");
        });

        marker.on("mouseout", function () {
          this.closePopup();
        });

        marker.on("dragend", (e) => {
          if (canDrag) {
            const newLat = e.target.getLatLng().lat;
            const newLng = e.target.getLatLng().lng;
            const markerId = e.target.options.id;
            updateLocationInDatabase(markerId, newLat, newLng).then(() => {
              // Optional: Update UI or state after dragging
            });
          } else {
            console.error("Drag operation not allowed");
          }
        });

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

export const setupPolylines = (map, linePositions, lineColors, tooltipContents, setNewCoords, tempMarker, currentZoom, currentCenter) => {
  const markers = [];
  const polylines = [];

  linePositions.forEach((lineData, lineIndex) => {
    const lineMarkers = [];

    lineData.coordinates.forEach((coord, index) => {
      let icon = circleIcon;
      if (index === 0) {
        icon = startIcon;
      } else if (index === lineData.coordinates.length - 1) {
        icon = endIcon;
      }

      const marker = L.marker(coord, {
        icon: icon,
        draggable: true,
        contextmenu: true,
        contextmenuInheritItems: false,
        contextmenuItems: [],
      }).addTo(map);

      marker.on("dragend", () => {
        const newCoords = marker.getLatLng();
        setNewCoords(newCoords);
        const newCoordinates = [...lineData.coordinates];
        newCoordinates[index] = [newCoords.lat, newCoords.lng];

        const updatedPolyline = L.polyline(newCoordinates, {
          color: lineColors[`${lineData.idLD}-${lineData.idModul}`] || "#000000",
        }).addTo(map);

        updatedPolyline.bindTooltip(tooltipContents[`${lineData.idLD}-${lineData.idModul}`] || "Standard-Tooltip-Inhalt", {
          permanent: false,
          direction: "auto",
        });

        updatedPolyline.on("mouseover", () => {
          updatedPolyline.setStyle({ weight: 20 });
          updatedPolyline.bringToFront();
        });

        updatedPolyline.on("mouseout", () => {
          updatedPolyline.setStyle({ weight: 3 });
        });

        polylines[lineIndex].remove();
        polylines[lineIndex] = updatedPolyline;
        lineData.coordinates = newCoordinates;

        const requestData = {
          idModul: lineData.idModul,
          idLD: lineData.idLD,
          newCoordinates,
        };

        fetch("/api/talas_v5_DB/gisLines/updateLineCoordinates", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(requestData),
        })
          .then((response) => {
            if (!response.ok) {
              return response.json().then((data) => {
                throw new Error(data.error || "Unbekannter Fehler");
              });
            }
            return response.json();
          })
          .then((data) => {
            console.log("Koordinaten erfolgreich aktualisiert:", data);
          })
          .catch((error) => {
            console.error("Fehler beim Aktualisieren der Koordinaten:", error.message);
          });
      });

      marker.on("mouseover", function () {
        this.bindContextMenu({
          contextmenuItems: [
            {
              text: "Stützpunkt entfernen",
              icon: "/img/icons/gisLines/remove-support-point.svg",
              callback: () => {
                const newCoords = marker.getLatLng();
                const newCoordinates = [...lineData.coordinates];
                newCoordinates[index] = [newCoords.lat, newCoords.lng];

                removeMarker(marker, lineData, currentZoom, currentCenter);
                polylines[lineIndex].remove();
                lineData.coordinates = newCoordinates;
              },
            },
          ],
        });
      });

      marker.on("mouseout", function () {
        this.unbindContextMenu();
      });

      lineMarkers.push(marker);
    });

    const polyline = L.polyline(lineData.coordinates, {
      color: lineColors[`${lineData.idLD}-${lineData.idModul}`] || "#000000",
      weight: 3, // Standard weight for better recognition
      contextmenu: true,
      contextmenuItems: [
        {
          text: "Stützpunkt hinzufügen",
          icon: "/img/icons/gisLines/add-support-point.svg",
          callback: (e) => {
            if (tempMarker) {
              tempMarker.remove();
            }
            const newPoint = e.latlng;
            const closestPoints = findClosestPoints(lineData.coordinates, newPoint, map);
            insertNewMarker(closestPoints, newPoint, lineData, map);
            redrawPolyline(lineData, lineColors, tooltipContents, map);
            window.location.reload();
          },
        },
      ],
    }).addTo(map);

    polyline.on("mouseover", (e) => {
      console.log("Mouseover on polyline", lineData);
      polyline.setStyle({ weight: 14 });
      const link = `${process.env.NEXT_PUBLIC_BASE_URL}cpl.aspx?id=${lineData.idLD}`;
      localStorage.setItem("lastElementType", "polyline");
      localStorage.setItem("polylineLink", link);
    });

    polyline.on("mouseout", (e) => {
      console.log("Mouseout from polyline", lineData);
      polyline.setStyle({ weight: 3 });
    });

    polylines.push(polyline);
    markers.push(...lineMarkers);
  });

  return { markers, polylines };
};