import { useEffect } from "react";
import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker";

const useGmaMarkersLayer = (map, markers, GisStationsMeasurements, GMA, oms, isVisible) => {
  useEffect(() => {
    if (!map || !isVisible) return;

    // Entferne alte Marker
    GMA.clearLayers();

    markers.forEach((marker) => {
      const relevantMeasurements = GisStationsMeasurements.filter((m) => m.Area_Name === marker.options.areaName);

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

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

      const lt = measurements["LT"] || "-";
      const fbt = measurements["FBT"] || "-";
      const gt = measurements["GT"] || "-";
      const rlf = measurements["RLF"] || "-";

      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} °C</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,
        }
      );

      marker.on("tooltipopen", (e) => {
        const tooltipElement = e.tooltip._contentNode;

        if (tooltipElement) {
          tooltipElement.addEventListener("contextmenu", (event) => {
            event.preventDefault();
            console.log("Rechtsklick auf Tooltip erkannt");

            // Erstelle ein benutzerdefiniertes Kontextmenü
            const menu = document.createElement("div");
            menu.className = "custom-context-menu";
            menu.style.position = "absolute";
            menu.style.left = `${event.clientX}px`;
            menu.style.top = `${event.clientY}px`;
            menu.style.backgroundColor = "#fff";
            menu.style.border = "1px solid #ccc";
            menu.style.padding = "8px";
            menu.style.zIndex = "1000";

            // Menüeinträge hinzufügen
            const openStation = document.createElement("div");
            openStation.textContent = "Station öffnen (Tab)";
            openStation.style.cursor = "pointer";
            openStation.onclick = () => {
              if (marker.options.link) {
                window.open(marker.options.link, "_blank");
              } else {
                console.error("Kein Link für Tooltip vorhanden.");
              }
              document.body.removeChild(menu); // Menü entfernen
            };

            const showDetails = document.createElement("div");
            showDetails.textContent = "Details anzeigen";
            showDetails.style.cursor = "pointer";
            showDetails.onclick = () => {
              alert(`Details für ${area_name}`);
              document.body.removeChild(menu); // Menü entfernen
            };

            // Menüeinträge zum Menü hinzufügen
            menu.appendChild(openStation);
            menu.appendChild(document.createElement("hr"));
            menu.appendChild(showDetails);

            // Menü zum DOM hinzufügen
            document.body.appendChild(menu);

            // Menü entfernen, wenn irgendwo anders geklickt wird
            const handleClickOutside = () => {
              if (document.body.contains(menu)) {
                document.body.removeChild(menu);
                document.removeEventListener("click", handleClickOutside);
              }
            };

            document.addEventListener("click", handleClickOutside);
          });
        }
      });

      addContextMenuToMarker(marker);

      GMA.addLayer(marker);
      oms.addMarker(marker);
    });

    map.addLayer(GMA);

    return () => {
      GMA.clearLayers();
      map.removeLayer(GMA);
    };
  }, [map, markers, GisStationsMeasurements, GMA, oms, isVisible]);
};

export default useGmaMarkersLayer;