nodeMap/utils/initializeMap.js

// utils/initializeMap.js
import L from "leaflet";
import "leaflet-contextmenu";
import "leaflet/dist/leaflet.css";
import "leaflet-contextmenu/dist/leaflet.contextmenu.css";
import { store } from "../redux/store";
import * as urls from "../config/urls.js";
import * as layers from "../config/layers.js";

export const initializeMap = (mapRef, setMap, setOms, setMenuItemAdded, addItemsToMapContextMenu, hasRights, setPolylineEventsDisabled) => {
  if (!mapRef.current) {
    console.error("❌ Fehler: mapRef.current ist nicht definiert.");
    return;
  }

  if (mapRef.current._leaflet_id) {
    console.log("⚠️ Karte ist bereits initialisiert – `dragging.enable()` wird sichergestellt.");
    setTimeout(() => {
      if (mapRef.current) {
        mapRef.current.dragging.enable();
      }
    }, 100);
    return;
  }

  // Leaflet-Karte erstellen
  const initMap = L.map(mapRef.current, {
    center: [53.111111, 8.4625],
    zoom: 12,
    minZoom: 5,
    maxZoom: 15,
    zoomControl: false,
    dragging: true,
    contextmenu: true, // ✅ Sicherstellen, dass Kontextmenü aktiviert ist
    layers: [
      layers.MAP_LAYERS.TALAS,
      layers.MAP_LAYERS.ECI,
      layers.MAP_LAYERS.GSMModem,
      layers.MAP_LAYERS.CiscoRouter,
      layers.MAP_LAYERS.WAGO,
      layers.MAP_LAYERS.Siemens,
      layers.MAP_LAYERS.OTDR,
      layers.MAP_LAYERS.WDM,
      layers.MAP_LAYERS.GMA,
      layers.MAP_LAYERS.TALASICL,
      layers.MAP_LAYERS.Sonstige,
      layers.MAP_LAYERS.ULAF,
    ],
  });

  initMap.dragging.enable();

  // 🌍 **🚀 Kontextmenü sicherstellen**
  if (!initMap.contextmenu) {
    console.error("❌ `contextmenu` ist nicht verfügbar.");
    return;
  }

  // **Kontextmenü für Geräte aktualisieren**
  initMap.on("contextmenu.show", (e) => {
    const clickedElement = e.relatedTarget;
    const selectedDevice = store.getState().selectedDevice; // Redux-Wert abrufen

    if (!initMap.contextmenu || !initMap.contextmenu.items) {
      console.error("❌ Fehler: `contextmenu` oder `items` ist nicht definiert.");
      return;
    }

    try {
      initMap.contextmenu.removeAllItems(); // **Sicherstellen, dass vorherige Einträge entfernt werden**
    } catch (error) {
      console.error("❌ Fehler beim Entfernen der Menüelemente:", error);
    }

    if (!clickedElement) {
      console.error("❌ Kein gültiges Ziel für das Kontextmenü.");
      return;
    }

    // 🛑 Falls `selectedDevice === null`, kein "Station öffnen" anzeigen
    if (!selectedDevice || !clickedElement.options?.idDevice) {
      console.log("ℹ️ Kein Gerät ausgewählt – 'Station öffnen' wird nicht hinzugefügt.");
      return;
    }

    // ✅ Falls `selectedDevice` gesetzt ist, "Station öffnen" anzeigen
    console.log("✅ Gerät erkannt – 'Station öffnen' wird hinzugefügt.");
    initMap.contextmenu.addItem({
      text: "Station öffnen (Tab)",
      icon: "/img/screen_new.png",
      callback: () => {
        const link = `http://${window.location.hostname}/talas5/devices/${selectedDevice.id}`;
        if (link) {
          console.log("🟢 Öffne Link in neuem Tab:", link);
          window.open(link, "_blank");
        } else {
          console.error("❌ Kein Link in den Marker-Optionen gefunden.");
        }
      },
    });
  });

  // Tile-Layer hinzufügen
  L.tileLayer(urls.OFFLINE_TILE_LAYER, {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
  }).addTo(initMap);

  // Initialisiere OverlappingMarkerSpiderfier
  const overlappingMarkerSpiderfier = new OverlappingMarkerSpiderfier(initMap, {
    nearbyDistance: 20,
  });

  // Setze die Map und OMS in den State
  setMap(initMap);
  setOms(overlappingMarkerSpiderfier);

  // Falls Rechte geladen sind, füge das Kontextmenü hinzu
  if (hasRights && !setMenuItemAdded) {
    addItemsToMapContextMenu(initMap, setMenuItemAdded, setPolylineEventsDisabled);
  }
};