// /hooks/layers/useBereicheMarkersLayer.js
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;

    const mapLayersVisibility = JSON.parse(localStorage.getItem("mapLayersVisibility")) || {};

    const areAllLayersInvisible = Object.values(mapLayersVisibility).every((visibility) => !visibility);

    if (areAllLayersInvisible === prevVisibility.current) return;

    prevVisibility.current = areAllLayersInvisible;

    bereicheMarkers.forEach((marker) => {
      if (areAllLayersInvisible) {
        marker.addTo(map);
        if (oms) oms.addMarker(marker);
      } else {
        map.removeLayer(marker);
      }
    });
  };

  useEffect(() => {
    updateMarkersVisibility();

    const handleStorageChange = (event) => {
      if (event.key === "mapLayersVisibility") {
        updateMarkersVisibility();
      }
    };

    window.addEventListener("storage", handleStorageChange);

    const intervalId = setInterval(() => {
      updateMarkersVisibility();
    }, 500);

    return () => {
      window.removeEventListener("storage", handleStorageChange);
      clearInterval(intervalId);
    };
  }, [map, bereicheMarkers, oms]);

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

        if (!response.ok) {
          throw new Error(`API-Fehler: ${response.status} ${response.statusText}`);
        }

        const data = await response.json();

        const markers = data.map((item) => {
          const marker = L.marker([item.x, item.y], {
            icon: customIcon,
            draggable: true,
          });

          marker.bindTooltip(
            `
            <strong>Bereich:</strong> ${item.location_name} <br />
            <strong>Standort:</strong> ${item.area_name} <br />
            `,
            {
              permanent: false,
              direction: "top",
              offset: [0, -20],
            }
          );

          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.message);
        setBereicheMarkers([]); // Wichtig: Leere Liste setzen, kein reload oder Ausnahme erzeugen
      }
    };

    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;
