nodeMap/hooks/useMapComponentState.js

// hooks/useMapComponentState.js
// POI -> Kontextmenü -> POI bearbeiten -> Dropdown Geräteauswahl
import { useState, useEffect } from "react";
import { useRecoilValue } from "recoil";
import { poiLayerVisibleState } from "../redux/slices/poiLayerVisibleSlice";
import { isMockMode } from "../config/config";

export const useMapComponentState = () => {
  const [poiTypData, setPoiTypData] = useState([]);
  const [isPoiTypLoaded, setIsPoiTypLoaded] = useState(false);
  const [deviceName, setDeviceName] = useState("");
  const [locationDeviceData, setLocationDeviceData] = useState([]);
  const [priorityConfig, setPriorityConfig] = useState([]);
  const [menuItemAdded, setMenuItemAdded] = useState(false);
  const poiLayerVisible = useRecoilValue(poiLayerVisibleState);

  useEffect(() => {
    const fetchPoiTypData = async () => {
      if (isMockMode()) {
        console.log("⚠️ Mock-API: POI Typen geladen (Mock)");

        const mockData = [
          { idPoiTyp: 1, name: "Mock Zähleranschlusskasten", icon: 4, onlySystemTyp: 0 },
          { idPoiTyp: 2, name: "Mock Geräteschrank", icon: 2, onlySystemTyp: 0 },
          { idPoiTyp: 4, name: "Mock Parkplatz", icon: 3, onlySystemTyp: 0 },
          { idPoiTyp: 6, name: "Mock Zufahrt", icon: 4, onlySystemTyp: 0 },
          { idPoiTyp: 20, name: "Mock Zählgerät", icon: 5, onlySystemTyp: 110 },
          { idPoiTyp: 21, name: "Mock Messschleife", icon: 6, onlySystemTyp: 110 },
          { idPoiTyp: 25, name: "Mock Sonstige", icon: 0, onlySystemTyp: 0 },
          { idPoiTyp: 33, name: "Mock Autobahnauffahrt", icon: 4, onlySystemTyp: null },
        ];

        setPoiTypData(mockData);
        setIsPoiTypLoaded(true);
        return;
      }

      try {
        const response = await fetch("/api/talas_v5_DB/poiTyp/readPoiTyp");
        const data = await response.json();
        setPoiTypData(data);
        setIsPoiTypLoaded(true);
      } catch (error) {
        console.error("❌ Fehler beim Abrufen der POI-Typen:", error);
        setPoiTypData([]);
        setIsPoiTypLoaded(true);
      }
    };

    const fetchDeviceData = async () => {
      try {
        const host = window.location.hostname;
        const port = host === "10.10.0.70" ? "3000" : "80";

        //const apiBaseUrl = `http://${host}:${port}/talas5/ClientData/WebServiceMap.asmx`;
        const apiBaseUrl = `http://10.10.0.70/talas5/ClientData/WebServiceMap.asmx`;

        const params = new URLSearchParams(window.location.search);
        const idMap = params.get("m");
        //console.log("idMap:", idMap);
        const url = `${apiBaseUrl}/GisStationsStatic?idMap=${idMap}`;

        //console.log("URL:", url);

        const response = await fetch(url);

        // 🔄 KORREKT: Webservice liefert direkt JSON
        const data = await response.json();
        //console.log("Standort- und Gerätedaten:", data);

        setLocationDeviceData(data.Points || []);
        if (data.Points && data.Points.length > 0) {
          setDeviceName(data.Points[0].LD_Name);
          //console.log("Gerätename:", data.Points[0].LD_Name);
        }
      } catch (error) {
        console.error("❌ Fehler beim Abrufen der Gerätedaten:", error);
      }
    };

    fetchPoiTypData();
    fetchDeviceData();
  }, []);

  return {
    poiTypData,
    isPoiTypLoaded,
    deviceName,
    setDeviceName,
    locationDeviceData,
    setLocationDeviceData,
    priorityConfig,
    setPriorityConfig,
    menuItemAdded,
    setMenuItemAdded,
    poiLayerVisible,
  };
};