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

// Definiere ein Standard-Icon
const customIcon = new L.Icon({
  iconUrl: "/img/bereich.png",
  iconSize: [25, 41],
  iconAnchor: [12, 41],
  popupAnchor: [1, -34],
  shadowUrl: "/img/marker-shadow.png",
  shadowSize: [41, 41],
});

const useBereicheMarkersLayer = (map, oms, apiUrl) => {
  const [bereicheMarkers, setBereicheMarkers] = useState([]);
  const prevVisibility = useRef(null); // Referenz, um vorherige Sichtbarkeitsdaten zu speichern

  const updateMarkersVisibility = () => {
    if (!map || bereicheMarkers.length === 0) return;

    // Hole die Sichtbarkeitsdaten aus localStorage
    const mapLayersVisibility = JSON.parse(localStorage.getItem("mapLayersVisibility")) || {};

    // Überprüfen, ob alle Layer unsichtbar sind
    const areAllLayersInvisible = Object.values(mapLayersVisibility).every((visibility) => !visibility);

    // Wenn die Sichtbarkeit gleich bleibt, breche die Ausführung ab
    if (areAllLayersInvisible === prevVisibility.current) return;

    // Speichere den neuen Sichtbarkeitsstatus
    prevVisibility.current = areAllLayersInvisible;

    // Füge Marker hinzu oder entferne sie basierend auf der Bedingung
    bereicheMarkers.forEach((marker) => {
      if (areAllLayersInvisible) {
        marker.addTo(map);
        if (oms) oms.addMarker(marker); // Overlapping Marker Spiderfier
      } else {
        map.removeLayer(marker); // Entferne Marker, wenn die Bedingung nicht erfüllt ist
      }
    });
  };

  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) => {
          const marker = L.marker([item.x, item.y], { icon: customIcon });

          // Tooltip statt Popup
          marker.bindTooltip(
            `<strong>ID Location:</strong> ${item.idLocation} <br />
             <strong>ID Map:</strong> ${item.idMaps}`,
            {
              permanent: false, // Tooltip wird nur bei Mouseover angezeigt
              direction: "top", // Position des Tooltips relativ zum Marker
              offset: [0, -20], // Verschiebung für bessere Sichtbarkeit
            }
          );

          return marker;
        });

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

    fetchBereiche();
  }, [apiUrl]);

  useEffect(() => {
    // Initialisiere die Sichtbarkeit beim ersten Laden
    updateMarkersVisibility();

    // Listener für Änderungen in localStorage hinzufügen
    const handleStorageChange = (event) => {
      if (event.key === "mapLayersVisibility") {
        updateMarkersVisibility();
      }
    };

    window.addEventListener("storage", handleStorageChange);

    // Fallback: Überwachung durch Intervall
    const intervalId = setInterval(() => {
      updateMarkersVisibility();
    }, 500); // Alle 500ms prüfen

    return () => {
      // Entferne den Listener und das Intervall
      window.removeEventListener("storage", handleStorageChange);
      clearInterval(intervalId);
    };
  }, [map, bereicheMarkers, oms]);

  useEffect(() => {
    const fetchBereiche = async () => {
      try {
        const response = await fetch(apiUrl);
        const data = await response.json();

        const markers = data.map((item) => {
          const marker = L.marker([item.x, item.y], {
            icon: customIcon,
            draggable: true, // Ermöglicht Drag-and-Drop
          });

          // Tooltip
          marker.bindTooltip(
            `<strong>ID Location:</strong> ${item.idLocation} <br />
             <strong>ID Map:</strong> ${item.idMaps}`,
            {
              permanent: false,
              direction: "top",
              offset: [0, -20],
            }
          );

          // Event-Listener für Drag-End
          marker.on("dragend", async (e) => {
            const { lat, lng } = e.target.getLatLng();
            try {
              await updateLocation(item.idLocation, item.idMaps, { x: lat, y: lng });
              console.log("Koordinaten erfolgreich aktualisiert:", { lat, lng });
            } catch (error) {
              console.error("Fehler beim Aktualisieren der Koordinaten:", error);
            }
          });

          return marker;
        });

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

    fetchBereiche();
  }, [apiUrl]);

  useEffect(() => {
    if (map) {
      bereicheMarkers.forEach((marker) => marker.addTo(map));
    }

    return () => {
      if (map) {
        bereicheMarkers.forEach((marker) => map.removeLayer(marker));
      }
    };
  }, [map, bereicheMarkers]);

  return bereicheMarkers;
};

export default useBereicheMarkersLayer;