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

const useGmaMarkersLayer = (
  map,
  gmaMarkers,
  GisStationsMeasurements,
  GMA,
  oms
) => {
  useEffect(() => {
    if (map && gmaMarkers.length) {
      // Filtere die relevanten Messungen für Fahrbahnzustand
      const gmaMeasurements = GisStationsMeasurements.filter(
        (m) => m.Gr === "Fahrbahnzustand"
      );

      gmaMarkers.forEach((marker) => {
        marker.addTo(map);
        oms.addMarker(marker);

        // Finde die Messungen, die zu diesem Marker gehören
        const relevantMeasurements = gmaMeasurements.filter(
          (m) => m.Area_Name === marker.options.areaName
        );

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

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

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

        // Log die aktuellen Messwerte für den Marker
   /*      
        console.log(
          `Marker at ${area_name} - LT: ${lt}, FBT: ${fbt}, GT: ${gt}, RLF: ${rlf}`
        );
 */
        // Tooltip für den Marker binden
        marker.bindTooltip(
          `
            <div class="p-0 rounded-lg bg-white bg-opacity-90">
              <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: [20, 0],
          }
        );

        // Ereignisse für das Öffnen und Schließen des Tooltips
        marker.on("mouseover", function () {
          this.openPopup();
        });
        marker.on("mouseout", function () {
          this.closePopup();
        });
        addContextMenuToMarker(marker);
      });
      map.addLayer(GMA);
    }
  }, [map, gmaMarkers, GisStationsMeasurements, GMA, oms]);
};

export default useGmaMarkersLayer;