// /hooks/useTalasMarkers.js
import { useEffect, useState } from "react";
import L from "leaflet";
import "leaflet-contextmenu";
import { useRecoilValue } from "recoil";
import { mapLayersState } from "../../store/atoms/mapLayersState.js";
import { selectedAreaState } from "../../store/atoms/selectedAreaState.js";
import { zoomTriggerState } from "../../store/atoms/zoomTriggerState.js";
import { addContextMenuToMarker } from "../../utils/addContextMenuToMarker.js";
import { checkOverlappingMarkers } from "../../utils/mapUtils.js";
import plusRoundIcon from "../../components/PlusRoundIcon.js";
import { gisStationsStaticDistrictState } from "../../store/atoms/gisStationState.js";

const useTalasMarkers = (map, oms, layers, priorityConfig) => {
  const [talasMarkers, setTalasMarkers] = useState([]);
  const mapLayersVisibility = useRecoilValue(mapLayersState);
  const selectedArea = useRecoilValue(selectedAreaState);
  const zoomTrigger = useRecoilValue(zoomTriggerState);
  const GisStationsStaticDistrict = useRecoilValue(gisStationsStaticDistrictState);

  // Funktion zum Erstellen und Setzen der Marker
  const createAndSetDevices = (systemId, setMarkers, GisSystemStatic, priorityConfig) => {
    const markers = GisSystemStatic.filter((station) => station.System === systemId).map((station) => {
      const marker = L.marker([station.Latitude, station.Longitude], {
        title: station.Name,
        contextmenu: true,
        contextmenuItems: [],
      });

      marker.bindPopup(`<b>${station.Name}</b><br>${station.Description}`);

      if (priorityConfig.includes(station.Priority)) {
        marker.setIcon(
          L.icon({
            iconUrl: `/icons/priority_${station.Priority}.png`,
            iconSize: [25, 41],
            iconAnchor: [12, 41],
            popupAnchor: [1, -34],
          })
        );
      }

      return marker;
    });

    setMarkers(markers);
  };

  useEffect(() => {
    if (map && talasMarkers.length) {
      talasMarkers.forEach((marker) => {
        marker.addTo(map);
        oms.addMarker(marker);

        marker.on("mouseover", function () {
          this.openPopup();
        });
        marker.on("mouseout", function () {
          this.closePopup();
        });

        addContextMenuToMarker(marker);
      });

      map.addLayer(layers.TALAS);
      checkOverlappingMarkers(oms, map, plusRoundIcon);
    }
  }, [map, talasMarkers]);

  useEffect(() => {
    if (!map || !talasMarkers) return;

    const toggleLayer = (isVisible) => {
      if (isVisible) {
        talasMarkers.forEach((marker) => marker.addTo(map));
      } else {
        talasMarkers.forEach((marker) => map.removeLayer(marker));
      }
    };

    toggleLayer(mapLayersVisibility.TALAS);
  }, [map, talasMarkers, mapLayersVisibility.TALAS]);

  useEffect(() => {
    if (selectedArea && map) {
      const station = GisStationsStaticDistrict.find((s) => s.Area_Name === selectedArea);
      if (station) {
        map.flyTo([station.X, station.Y], 14);
      }
    }
  }, [selectedArea, map, GisStationsStaticDistrict]);

  useEffect(() => {
    if (zoomTrigger && map) {
      map.flyTo([51.41321407879154, 7.739617925303934], 7);
    }
  }, [zoomTrigger, map]);

  return [talasMarkers, setTalasMarkers, createAndSetDevices];
};

export default useTalasMarkers;