// /utils/createAndSetDevices.js
import L from "leaflet";
import "leaflet.smooth_marker_bouncing";
import { SERVER_URL } from "../config/urls.js";
import * as config from "../config/config.js";

// Funktion zur Bestimmung der Farbklasse basierend auf der Priorität
const getColorClass = (level) => {
  if (level === 1) return "red";
  if (level === 2) return "orange";
  if (level === 3) return "yellow";
  return "green"; // Standardfarbe
};

// Funktion zum Erstellen und Setzen von Markern
export const createAndSetDevices = async (systemId, setMarkersFunction, GisSystemStatic, priorityConfig) => {
  try {
    // Lade die statischen Daten
    const response1 = await fetch(config.mapGisStationsStaticDistrictUrl);
    const jsonResponse = await response1.json();

    const response2 = await fetch(config.mapGisStationsStatusDistrictUrl);
    const statusResponse = await response2.json();

    const getIdSystemAndAllowValueMap = new Map(GisSystemStatic.map((system) => [system.IdSystem, system.Allow]));

    if (jsonResponse.Points && statusResponse.Statis) {
      const statisMap = new Map(statusResponse.Statis.map((s) => [s.IdLD, s]));

      let markersData = jsonResponse.Points
        .filter((station) => station.System === systemId && getIdSystemAndAllowValueMap.get(station.System) === 1)
        .map((station) => {
          const statis = statisMap.get(station.IdLD);

          // Priorität und Farbklasse bestimmen
          const priorityConfigForStation = priorityConfig.find((p) => p.location_id === station.IdLD);
          const level = priorityConfigForStation ? priorityConfigForStation.prio_level : 5; // Standardlevel
          const colorClass = getColorClass(level); // Farbklasse ermitteln

          // Dynamische CSS-Filter verwenden
          const marker = L.marker([station.X, station.Y], {
            icon: L.divIcon({
              className: `leaflet-marker-icon ${colorClass}`, // Dynamische CSS-Klasse für Filter
              html: `<img src="img/icons/marker-icon-${station.Icon}.png" style="filter: hue-rotate(${level * 30}deg);" />`, // Dynamischer Filter
              iconSize: [25, 41],
              iconAnchor: [12, 41],
              popupAnchor: [1, -34],
            }),
            zIndexOffset: 100 * (6 - level), // Z-Index nach Priorität
          });

          // Popup-Info dynamisch erstellen
          const statusInfo = statusResponse.Statis.filter((status) => status.IdLD === station.IdLD)
            .reverse()
            .map(
              (status) => `
                <div class="flex items-center my-1">
                  <div class="w-2 h-2 mr-2 inline-block rounded-full" style="background-color: ${status.Co};"></div>
                  ${status.Me}&nbsp;<span style="color: ${status.Co};">(${status.Na})</span>
                </div>
              `
            )
            .join("");

          marker.bindPopup(`
            <div class="bg-white rounded-lg">
              <span class="text-lg font-semibold text-gray-900">${station.LD_Name}</span>
              <span class="text-md font-bold text-gray-800"> ${station.Device}</span><br>
              <span class="text-gray-800"><strong> ${station.Area_Short} </strong>(${station.Area_Name})</span><br>
              <span class="text-gray-800"><strong>${station.Location_Short} </strong> (${station.Location_Name})</span>
              <div class="mt-2">${statusInfo}</div>
            </div>
          `);

          // **Mouseover zeigt Popup**
          marker.on("mouseover", function () {
            this.openPopup();
          });

          // **Mouseout schließt Popup**
          marker.on("mouseout", function () {
            this.closePopup();
          });

          return marker;
        });

      setMarkersFunction(markersData);
    }
  } catch (error) {
    console.error("Fehler beim Abrufen der Daten: ", error);
  }
};