nodeMap/utils/createAndSetDevices.js

import circleIcon from "../components/gisPolylines/icons/CircleIcon";
import { saveLineData, redrawPolyline } from "./mapUtils";
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"; // Importiere die Funktion zum Deaktivieren der Polyline-Ereignisse
import { setPolylineEventsDisabled } from "../store/atoms/polylineEventsDisabledState"; // Importiere den Recoil-Atom-Zustand

// Funktion zum Bestimmen der Priorität basierend auf dem Icon-Pfad
const determinePriority = (iconPath, priorityConfig) => {
  for (let priority of priorityConfig) {
    if (iconPath.includes(priority.name.toLowerCase())) {
      return priority.level;
    }
  }
  return 5; // Standardpriorität (niedrigste)
};

// Funktion zum Erstellen und Setzen von Markern
export const createAndSetDevices = async (systemId, setMarkersFunction, GisSystemStatic, priorityConfig) => {
  try {
    const response1 = await fetch(config.mapGisStationsStaticDistrictUrl);
    const jsonResponse = await response1.json();
    const response2 = await fetch(config.mapGisStationsStatusDistrictUrl);
    const statusResponse = await response2.json();
    const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;

    const getIdSystemAndAllowValueMap = new Map(GisSystemStatic.map((system) => [system.IdSystem, system.Allow]));

    if (jsonResponse.Points && statusResponse.Statis) {
      const statisMap = new Map(statusResponse.Statis.map((s) => [s.IdLD, s]));
      let markersData = jsonResponse.Points.filter((station) => station.System === systemId && getIdSystemAndAllowValueMap.get(station.System) === 1).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); // Adjusted for simplicity and positive values

        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, // Stelle sicher, dass dieser Bereich gesetzt wird
          link: station.Link,
          zIndexOffset: zIndexOffset,
        });

        // Deaktiviere Polyline-Ereignisse beim Überfahren des Markers
        marker.on("mouseover", function () {
          this.openPopup();
        });

        // Verwende das `contextmenu`-Ereignis für den Rechtsklick
        /*     marker.on("contextmenu", function (event) {
          if (event && event.preventDefault) {
            event.preventDefault(); // Verhindert das Standard-Kontextmenü
          }
          disablePolylineEvents(window.polylines);
          this.openPopup();
        });
 */
        marker.on("contextmenu", function (event) {
          if (event && event.preventDefault) {
            event.preventDefault(); // Verhindert das Standard-Kontextmenü
          }
          //setPolylineEventsDisabled(true);
          disablePolylineEvents(window.polylines);
          this.openPopup();
        });

        document.addEventListener("mouseout", function (event) {
          if (event.relatedTarget === null || event.relatedTarget.nodeName === "BODY") {
            //setPolylineEventsDisabled(false);
            enablePolylineEvents(window.polylines, window.lineColors);
          }
        });
        marker.on("mouseout", function () {
          this.closePopup();
        });

        // Überprüfe, ob die bounce-Funktion verfügbar ist und verwende sie
        if (typeof marker.bounce === "function" && statis) {
          marker.on("add", () => marker.bounce(3));
        }

        const statusInfo = statusResponse.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("");

        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">${statusInfo}</div>
              <a href="${station.Link}" target="_blank" style="color: blue;">${BASE_URL}${station.Link}</a>
            </div>
          `);

        return marker;
      });

      setMarkersFunction(markersData);
    }
  } catch (error) {
    console.error("Error fetching data: ", error);
  }
};