nodeMap/utils/devices/createAndSetDevices.js

// /utils/devices/createAndSetDevices.js
import L from "leaflet";
import "leaflet.smooth_marker_bouncing";
import { toast } from "react-toastify";
import * as config from "../../config/config.js";
import { disablePolylineEvents, enablePolylineEvents } from "../polylines/setupPolylines.js";
import { store } from "../../redux/store.js";
import { updateLineStatus } from "../../redux/slices/lineVisibilitySlice.js";
import { setSelectedDevice, clearSelectedDevice } from "../../redux/slices/selectedDeviceSlice.js";
import { addContextMenuToMarker } from "../contextMenuUtils.js";

const determinePriority = (iconPath, priorityConfig) => {
  for (let priority of priorityConfig) {
    if (iconPath.includes(priority.name.toLowerCase())) {
      return priority.level;
    }
  }
  return 5;
};

const fetchJsonSafely = async (url) => {
  try {
    const response = await fetch(url);
    const text = await response.text(); // Erst als Text lesen

    try {
      return JSON.parse(text); // Falls es JSON ist, parsen
    } catch (error) {
      console.error(`❌ Fehler beim Parsen der JSON-Daten von ${url}. Antwort:`, text);
      return null; // Falls die Antwort HTML ist, keine JSON-Verarbeitung versuchen
    }
  } catch (error) {
    console.error(`❌ Fehler beim Abrufen der Daten von ${url}:`, error);
    return null;
  }
};

export const createAndSetDevices = async (systemId, setMarkersFunction, GisSystemStatic, priorityConfig) => {
  try {
    let staticDistrictData, statusDistrictData;

    if (config.isMockMode()) {
      console.log("⚠️ Mock-API: Geräte-Daten geladen");

      staticDistrictData = await fetchJsonSafely(config.mapGisStationsStaticDistrictUrl);
      statusDistrictData = await fetchJsonSafely(config.mapGisStationsStatusDistrictUrl);
    } else {
      staticDistrictData = await fetchJsonSafely(config.mapGisStationsStaticDistrictUrl);
      statusDistrictData = await fetchJsonSafely(config.mapGisStationsStatusDistrictUrl);
    }

    if (!staticDistrictData?.Points || !statusDistrictData?.Statis) {
      console.error("❌ Fehlende oder fehlerhafte Daten in API- oder Mock-Response!");
      return;
    }

    const statisMap = new Map(statusDistrictData.Statis.map((s) => [s.IdLD, s]));

    const allLines = staticDistrictData.Points.filter((station) => station.System === systemId).map((station) => {
      store.dispatch(updateLineStatus({ idLD: station.IdLD, active: station.Active }));
      return { idLD: station.IdLD, active: station.Active };
    });

    //console.log("🔄 Alle Linien gespeichert:", allLines);

    const activeStations = staticDistrictData.Points.filter((station) => station.System === systemId && station.Active === 1);

    const markersData = activeStations.map((station) => {
      const statis = statisMap.get(station.IdLD);
      const iconPath = statis ? `img/icons/${statis.Na}-marker-icon-${station.Icon}.png` : `img/icons/marker-icon-${station.Icon}.png`;

      const priority = determinePriority(iconPath, priorityConfig);
      const zIndexOffset = 100 * (5 - priority);

      const marker = L.marker([station.X, station.Y], {
        icon: L.icon({
          iconUrl: iconPath,
          iconSize: [25, 41],
          iconAnchor: [12, 41],
          popupAnchor: [1, -34],
        }),
        areaName: station.Area_Name,
        link: station.Link,
        zIndexOffset: zIndexOffset,
        deviceName: station.Device,
        idDevice: station.IdLD, // ✅ Sicherstellen, dass `idDevice` existiert
      });
      const popupContent = `
      <div class="bg-white rounded-lg">
        <span class="text-lg font-semibold text-gray-900">${station.LD_Name}</span>
        <span class="text-md font-bold text-gray-800">${station.Device}</span><br>
        <span class="text-gray-800"><strong>${station.Area_Short}</strong> (${station.Area_Name})</span><br>
        <span class="text-gray-800"><strong>${station.Location_Short}</strong> (${station.Location_Name})</span>
        <div class="mt-2">
          ${statusDistrictData.Statis.filter((status) => status.IdLD === station.IdLD)
            .reverse()
            .map(
              (status) => `
                <div class="flex items-center my-1">
                  <div class="w-2 h-2 mr-2 inline-block rounded-full" style="background-color: ${status.Co};"></div>
                  ${status.Me}&nbsp;<span style="color: ${status.Co};">(${status.Na})</span>
                </div>
              `
            )
            .join("")}
        </div>
      </div>
    `;
      marker.bindPopup(popupContent);

      // Redux: Gerät setzen
      marker.on("mouseover", () => {
        //console.log("✅ Gerät erkannt:", station);
        store.dispatch(setSelectedDevice({ id: station.IdLD, name: station.Device, area: station.Area_Name }));
        marker.openPopup(); // Bestehender Code bleibt erhalten
      });

      //-----------------------------------
      //-----------------------------------
      // Variable zum Speichern der hinzugefügten Menüeinträge
      let contextMenuItemIds = new Set();

      const addDeviceContextMenu = (map, marker) => {
        if (map && map.contextmenu) {
          if (contextMenuItemIds.size > 0) {
            contextMenuItemIds.forEach((id) => map.contextmenu.removeItem(id));
            contextMenuItemIds.clear();
          }

          const separator = map.contextmenu.addItem({ separator: true });

          const mode = process.env.NEXT_PUBLIC_API_PORT_MODE;
          const baseUrl = mode === "dev" ? `${window.location.protocol}//${window.location.hostname}:80/talas5/` : `${window.location.origin}/talas5/`;

          const detailsItem = map.contextmenu.addItem({
            text: "Station öffnen (Tab)",
            icon: "/img/screen_new.png",
            callback: () => {
              const link = `${baseUrl}cpl.aspx?ver=35&kue=24&id=${station.IdLD}`;
              window.open(link, "_blank");
            },
          });

          contextMenuItemIds.add(detailsItem);
          contextMenuItemIds.add(separator);
        }
      };

      // `contextmenu`-Event für Marker
      marker.on("contextmenu", (event) => {
        event.originalEvent?.preventDefault();
        marker.openPopup();
        addDeviceContextMenu(map, marker);
      });

      // Menü entfernen, wenn außerhalb des Markers geklickt wird
      map.on("click", () => {
        if (map.contextmenu && contextMenuItemIds.size > 0) {
          contextMenuItemIds.forEach((id) => map.contextmenu.removeItem(id));
          contextMenuItemIds.clear();
        }
      });

      //-----------------------------------
      //-----------------------------------
      if (typeof marker.bounce === "function" && statis) {
        marker.on("add", () => marker.bounce(3));
      }

      return marker;
    });

    setMarkersFunction(markersData);
  } catch (error) {
    console.error("❌ Fehler beim Abrufen der Daten in createAndSetDevices.js: ", error);
  }
};