// /hooks/layers/useMessstellenMarkersLayer.js
import { useEffect, useState } from "react";
import L from "leaflet";
import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";
import { createAndSetDevices } from "../../utils/createAndSetDevices";

const useMessstellenMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
  const [messstellenMarkers, setMessstellenMarkers] = useState([]);

  useEffect(() => {
    if (GisSystemStatic && GisSystemStatic.length && map) {
      createAndSetDevices(13, setMessstellenMarkers, GisSystemStatic, priorityConfig); // Messstellen
    }
  }, [GisSystemStatic, map, priorityConfig]);

  useEffect(() => {
    if (map && messstellenMarkers.length) {
      messstellenMarkers.forEach((marker) => {
        marker.addTo(map);
        oms.addMarker(marker);

        // Popup on mouseover and mouseout
        marker.on("mouseover", function () {
          this.openPopup();
        });
        marker.on("mouseout", function () {
          this.closePopup();
        });

        addContextMenuToMarker(marker);
      });
    }
  }, [map, messstellenMarkers, oms]);

  return messstellenMarkers;
};

export default useMessstellenMarkersLayer;