nodeMap/utils/createAndSetDevices.js

// /utils/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 "./setupPolylines";
import { store } from "../redux/store";
import { updateLineStatus } from "../redux/slices/lineVisibilitySlice";

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("/mockData/gisStationsStaticDistrictMock.json");
      statusDistrictData = await fetchJsonSafely("/mockData/gisStationsStatusDistrictMock.json");
    } 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,
      });

      marker.bindPopup(`
                <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.on("mouseover", () => marker.openPopup());
      marker.on("mouseout", () => marker.closePopup());
      marker.on("contextmenu", (event) => {
        if (event.originalEvent?.preventDefault) {
          event.originalEvent.preventDefault();
        }
        marker.openPopup();
      });

      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);
  }
};