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

const useGmaMarkersLayer = (map, gmaMarkers, GisStationsMeasurements, GMA, oms) => {
  useEffect(() => {
    if (map && gmaMarkers.length) {
      const gmaMeasurements = GisStationsMeasurements.filter((m) => m.Gr === "GMA");
      let area_name = "";
      let measurements = {};

      gmaMeasurements.forEach((m) => {
        area_name = m.Area_Name;
        measurements[m.Na] = m.Val;
      });

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

        // Logging the data to debug
        //console.log("Marker Data:", { area_name, measurements });

        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 : ${measurements.LT} °C</span> 
              </div>
              <div class="font-bold text-xxs text-red-700">
                <span>FBT : ${measurements.FBT} °C</span> 
              </div>
              <div class="font-bold text-xxs text-yellow-500">
                <span>GT : ${measurements.GT === "nicht ermittelbar" ? measurements.GT : `${measurements.GT} °C`}</span> 
              </div>
              <div class="font-bold text-xxs text-green-700">
                <span>RLF : ${measurements.RLF} %</span> 
              </div>
            </div>
          `,
          {
            permanent: true,
            direction: "auto",
            offset: [20, 0],
          },
        );

        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;