import { useEffect, useState } from "react";
import L from "leaflet";
import "leaflet/dist/leaflet.css";

// Definiere ein Standard-Icon
const customIcon = new L.Icon({
  iconUrl: "/img/marker-icon.png", // Beispielpfad: Passe dies auf dein Symbol an
  iconSize: [25, 41], // Größe des Icons
  iconAnchor: [12, 41], // Position des Icons
  popupAnchor: [1, -34],
  shadowUrl: "/img/marker-shadow.png", // Optionaler Schatten
  shadowSize: [41, 41],
});

const useBereicheMarkersLayer = (map, oms, apiUrl) => {
  const [bereicheMarkers, setBereicheMarkers] = useState([]);

  useEffect(() => {
    // Hole die Daten aus der API
    const fetchBereiche = async () => {
      try {
        const response = await fetch(apiUrl);
        const data = await response.json();

        const markers = data.map((item) => {
          // Erstelle Marker für jedes Datenbank-Item
          const marker = L.marker([item.x, item.y], { icon: customIcon }).bindPopup(`
            <strong>ID Location:</strong> ${item.idLocation} <br />
            <strong>ID Map:</strong> ${item.idMaps}
          `);

          return marker;
        });

        setBereicheMarkers(markers);
      } catch (error) {
        console.error("Fehler beim Laden der Bereiche:", error);
      }
    };

    fetchBereiche();
  }, [apiUrl]);

  useEffect(() => {
    if (map && bereicheMarkers.length) {
      // Füge alle Marker zur Karte hinzu
      bereicheMarkers.forEach((marker) => {
        marker.addTo(map);
        if (oms) oms.addMarker(marker); // Overlapping Marker Spiderfier
      });
    }
  }, [map, bereicheMarkers, oms]);
  useEffect(() => {
    if (!map) return; // Sicherheitsprüfung
    if (bereicheMarkers.length > 0) {
      bereicheMarkers.forEach((marker) => {
        marker.addTo(map);
        if (oms) oms.addMarker(marker);
      });
    }
  }, [map, bereicheMarkers, oms]);

  return bereicheMarkers;
};

export default useBereicheMarkersLayer;