import { useEffect } from "react";
import { store } from "../redux/store";
import L from "leaflet";
import "leaflet-contextmenu";
import { openInNewTab } from "./openInNewTab";

const useGmaMarkersLayer = (map, markers, selectedMarkerId) => {
  useEffect(() => {
    if (!map || !markers || markers.length === 0) return;

    const markerGroup = L.layerGroup();

    markers.forEach((markerData) => {
      const marker = L.marker([markerData.lat, markerData.lng], {
        contextmenu: true,
        contextmenuItems: [
          {
            text: "Station öffnen (Tab)",
            icon: "/img/screen_new.png",
            callback: () =>
              openInNewTab(null, {
                options: {
                  link: markerData.link,
                },
              }),
          },
        ],
      });

      markerGroup.addLayer(marker);

      // Optional: highlight selected marker
      if (selectedMarkerId && markerData.id === selectedMarkerId) {
        marker.setZIndexOffset(1000);
        marker.setIcon(
          L.icon({
            iconUrl: "/img/marker-selected.png",
            iconSize: [25, 41],
            iconAnchor: [12, 41],
          })
        );
      }
    });

    markerGroup.addTo(map);

    return () => {
      markerGroup.clearLayers();
      map.removeLayer(markerGroup);
    };
  }, [map, markers, selectedMarkerId]);
};

export default useGmaMarkersLayer;