import { useEffect, useRef } from "react";
import L from "leaflet";
import { createAndSetDevices } from "../utils/createAndSetDevices.js";
import { checkOverlappingMarkers } from "../utils/markerUtils";
import { plusRoundIcon } from "../components/PlusRoundIcon.js";

export const useDynamicMarkerLayers = (
  map,
  GisSystemStatic,
  mapLayersVisibility,
  priorityConfig,
  setMarkerStates // Funktion wie setMarkers(z.B. map.setMarkers(prev => ({...prev, [systemName]: markers})))
) => {
  const layerRefs = useRef({}); // dynamisch pro systemName

  useEffect(() => {
    if (!map || !Array.isArray(GisSystemStatic?.Systems)) return;

    GisSystemStatic.Systems.forEach(system => {
      const { id, System_Name } = system;

      if (!layerRefs.current[System_Name]) {
        layerRefs.current[System_Name] = new L.LayerGroup().addTo(map);
      }

      // Sichtbarkeit prüfen
      const isVisible = mapLayersVisibility?.[System_Name] ?? false;
      const layer = layerRefs.current[System_Name];
      layer.clearLayers();

      createAndSetDevices(
        id,
        markers => {
          setMarkerStates(prev => ({ ...prev, [System_Name]: markers }));

          if (isVisible) {
            markers.forEach(marker => layer.addLayer(marker));
          }

          checkOverlappingMarkers(map, markers, plusRoundIcon);
        },
        GisSystemStatic,
        priorityConfig
      );
    });
  }, [map, GisSystemStatic, mapLayersVisibility, priorityConfig]);
};