//hooks/layers/useGmaMarkersLayer.js
import { useEffect } from "react";
import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";

const useMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isVisible) => {
  useEffect(() => {
    if (!map || !isVisible) return; // Bedingung hier prüfen

    // Entferne alte Marker
    GMA.clearLayers();

    // Hinzufügen neuer Marker
    markers.forEach((marker) => {
      // Finde die Messungen, die zu diesem Marker gehören
      const relevantMeasurements = GisStationsMeasurements.filter(
        (m) => m.Area_Name === marker.options.areaName
      );

      let measurements = {};
      let area_name = marker.options.areaName;
      let idLD = marker.options.idLD;

      relevantMeasurements.forEach((m) => {
        measurements[m.Na] = m.Val;
      });

      // Überprüfe, ob die Messwerte vorhanden sind, und setze Standardwerte
      const lt = measurements["LT"] || "-";
      const fbt = measurements["FBT"] || "-";
      const gt = measurements["GT"] || "-";
      const rlf = measurements["RLF"] || "-";

      // Tooltip für den Marker binden
      marker.bindTooltip(
        `
          <div class="p-0 rounded-lg bg-white bg-opacity-90 tooltip-content">
            <div class="font-bold text-sm text-black">
              <span>${area_name}</span> 
            </div>
            <div class="font-bold text-xxs text-blue-700">
              <span>LT : ${lt} °C</span> 
            </div>
            <div class="font-bold text-xxs text-red-700">
              <span>FBT : ${fbt} °C</span> 
            </div>
            <div class="font-bold text-xxs text-yellow-500">
              <span>GT : ${gt}</span> 
            </div>
            <div class="font-bold text-xxs text-green-700">
              <span>RLF : ${rlf} %</span> 
            </div>
          </div>
        `,
        {
          permanent: true,
          direction: "auto",
          offset: [60, 0],
          interactive: true, // Tooltip is now interactive
        }
      );

      // Hinzufügen eines Kontextmenüs direkt zum Tooltip
      marker.on("tooltipopen", function (e) {
        const tooltipElement = e.tooltip._contentNode;
        if (tooltipElement) {
          tooltipElement.addEventListener("contextmenu", (event) => {
            event.preventDefault(); // Verhindere das Standard-Kontextmenü
            console.log("Rechtsklick auf Tooltip erkannt", {
              tooltipContent: tooltipElement.innerHTML,
              link: marker.options.link,
            });

            if (marker.options.link) {
              window.open(marker.options.link, "_blank");
            } else {
              console.error("Kein Tooltip-Link vorhanden.");
            }
          });
        }
      });

      // Ereignisse für das Öffnen und Schließen des Tooltips
      marker.on("mouseover", function () {
        this.openPopup();
      });
      marker.on("mouseout", function () {
        this.closePopup();
      });

      // Kontextmenü für Marker hinzufügen
      addContextMenuToMarker(marker);

      // Füge den Marker zur Layer-Gruppe hinzu
      GMA.addLayer(marker);
      oms.addMarker(marker);
    });

    map.addLayer(GMA);

    return () => {
      GMA.clearLayers();
      map.removeLayer(GMA); // Entferne die Layer, wenn der Hook gereinigt wird
    };
  }, [map, markers, GisStationsMeasurements, GMA, oms, isVisible]);
};

export default useMarkersLayer;