// hooks/useSmsfunkmodemMarkersLayer.js
import { useEffect, useState } from "react";
import L from "leaflet";
import "leaflet-contextmenu";
import { addContextMenuToMarker } from "../utils/contextMenuUtils";

const useSmsfunkmodemMarkersLayer = (map, oms, GisSystemStatic, priorityConfig) => {
  const [smsfunkmodemMarkers, setSmsfunkmodemMarkers] = useState([]);

  useEffect(() => {
    if (map && GisSystemStatic) {
      const markers = GisSystemStatic.filter((station) => station.System === 111).map((station) => {
        const marker = L.marker([station.Latitude, station.Longitude], {
          icon: L.icon({
            iconUrl: "/img/icons/pois/sms-funkmodem.png",
            iconSize: [25, 41],
            iconAnchor: [12, 41],
            popupAnchor: [1, -34],
          }),
          id: station.id,
          areaName: station.Area_Name,
          draggable: false,
        }).bindPopup(`
          <div>
            <b class="text-xl text-black-700">${station.Area_Name || "Unbekannt"}</b><br>
            ${station.Description || "No Description"}<br>
          </div>
        `);

        marker.on("mouseover", function () {
          this.openPopup();
        });

        marker.on("mouseout", function () {
          this.closePopup();
        });

        addContextMenuToMarker(marker);

        return marker;
      });

      setSmsfunkmodemMarkers(markers);
      markers.forEach((marker) => {
        marker.addTo(map);
        oms.addMarker(marker);
      });
    }
  }, [map, GisSystemStatic, priorityConfig]);

  return smsfunkmodemMarkers;
};

export default useSmsfunkmodemMarkersLayer;