nodeMap/components/uiWidgets/mapLayersControlPanel/MapLayersControlPanel.js

// /components/uiWidgets/mapLayersControlPanel/MapLayersControlPanel.js
import React, { useEffect, useState } from "react";
import { setSelectedArea } from "@/redux/slices/selectedAreaSlice";
import EditModeToggle from "@/components/uiWidgets/mapLayersControlPanel/EditModeToggle";
import { useSelector, useDispatch } from "react-redux";
import {
  selectPolylineVisible,
  setPolylineVisible,
} from "@/redux/slices/database/polylines/polylineLayerVisibleSlice";
import { selectGisSystemStatic } from "@/redux/slices/webservice/gisSystemStaticSlice";
import { selectGisStationsStaticDistrict } from "@/redux/slices/webservice/gisStationsStaticDistrictSlice";
import { selectMapLayersState, setLayerVisibility } from "@/redux/slices/mapLayersSlice";
import { setVisible } from "@/redux/slices/database/pois/poiLayerVisibleSlice";
import { incrementZoomTrigger } from "@/redux/slices/zoomTriggerSlice";

function MapLayersControlPanel() {
  const [editMode, setEditMode] = useState(false); // Zustand für editMode
  const poiVisible = useSelector(state => state.poiLayerVisible.visible);
  const setPoiVisible = value => dispatch(setVisible(value));
  const dispatch = useDispatch();
  const mapLayersVisibility = useSelector(selectMapLayersState);
  const [stationListing, setStationListing] = useState([]);
  const [systemListing, setSystemListing] = useState([]);
  const GisStationsStaticDistrict = useSelector(selectGisStationsStaticDistrict) || [];
  const GisSystemStatic = useSelector(selectGisSystemStatic) || [];

  const polylineVisible = useSelector(selectPolylineVisible);

  const handlePolylineCheckboxChange = event => {
    const checked = event.target.checked;
    dispatch(setPolylineVisible(checked));
    localStorage.setItem("polylineVisible", checked);

    if (checked) {
      dispatch(setLayerVisibility({ layer: "TALAS", visibility: true }));
      localStorage.setItem(
        "mapLayersVisibility",
        JSON.stringify({ ...mapLayersVisibility, TALAS: true })
      );
    }
  };

  useEffect(() => {
    // LocalStorage Werte laden
    const storedPoiVisible = localStorage.getItem("poiVisible");
    if (storedPoiVisible !== null) {
      setPoiVisible(storedPoiVisible === "true");
    }
    const storedPolylineVisible = localStorage.getItem("polylineVisible");
    if (storedPolylineVisible !== null) {
      dispatch(setPolylineVisible(storedPolylineVisible === "true"));
    }

    // Layer-Sichtbarkeiten aus localStorage laden
    const storedMapLayersVisibility = localStorage.getItem("mapLayersVisibility");
    if (storedMapLayersVisibility) {
      const parsedVisibility = JSON.parse(storedMapLayersVisibility);
      Object.keys(parsedVisibility).forEach(key => {
        dispatch(setLayerVisibility({ layer: key, visibility: parsedVisibility[key] }));
      });
    }

    // EditMode lesen
    const storedEditMode = localStorage.getItem("editMode");
    setEditMode(storedEditMode === "true");
  }, [setPoiVisible, dispatch]); // ✅ `setMapLayersVisibility` entfernt

  const handleAreaChange = event => {
    const selectedIndex = event.target.options.selectedIndex;
    const areaName = event.target.options[selectedIndex].text;
    dispatch(setSelectedArea(areaName));
  };

  useEffect(() => {
    const allowedSystems = Array.isArray(GisSystemStatic)
      ? new Set(GisSystemStatic.filter(system => system.Allow === 1).map(system => system.IdSystem))
      : new Set();

    const seenNames = new Set();
    const filteredAreas = GisStationsStaticDistrict?.Points?.length
      ? GisStationsStaticDistrict.Points.filter(item => {
          const isUnique = !seenNames.has(item.Area_Name) && allowedSystems.has(item.System);
          if (isUnique) {
            seenNames.add(item.Area_Name);
          }
          return isUnique;
        })
      : [];

    setStationListing(
      filteredAreas.map((area, index) => ({
        id: index + 1,
        name: area.Area_Name,
      }))
    );

    const seenSystemNames = new Set();
    const filteredSystems = Array.isArray(GisSystemStatic)
      ? GisSystemStatic.filter(item => {
          const isUnique = !seenSystemNames.has(item.Name) && item.Allow === 1;
          if (isUnique) {
            seenSystemNames.add(item.Name);
          }
          return isUnique;
        })
      : [];

    setSystemListing(
      filteredSystems.map((system, index) => ({
        id: index + 1,
        name: system.Name, // Verwende den Originalnamen für die Anzeige
        key: `system-${system.IdSystem}`, // Internen Schlüssel für die MapLayersVisibility-Logik
      }))
    );
  }, [GisStationsStaticDistrict, GisSystemStatic]);

  const handleCheckboxChange = (key, event) => {
    if (editMode) return;
    const { checked } = event.target;

    dispatch(setLayerVisibility({ layer: key, visibility: checked }));
    localStorage.setItem(
      "mapLayersVisibility",
      JSON.stringify({ ...mapLayersVisibility, [key]: checked })
    );

    setTimeout(() => {
      const event = new Event("visibilityChanged");
      window.dispatchEvent(event);
    }, 0);
  };

  const handlePoiCheckboxChange = event => {
    const { checked } = event.target;
    setPoiVisible(checked);
    localStorage.setItem("poiVisible", checked); // Store POI visibility in localStorage
  };

  const handleIconClick = () => {
    setSelectedArea("Station wählen");
    dispatch(incrementZoomTrigger());
  };

  //------------------------------
  useEffect(() => {
    if (process.env.NEXT_PUBLIC_DEBUG_LOG === "true") {
      console.log("🔍 GisStationsStaticDistrict Inhalt:", GisStationsStaticDistrict);
    }

    if (!GisStationsStaticDistrict) {
      console.warn("⚠️ GisStationsStaticDistrict ist `null` oder nicht geladen.");
      return;
    }

    if (typeof GisStationsStaticDistrict !== "object") {
      console.warn("⚠️ GisStationsStaticDistrict ist kein Objekt:", GisStationsStaticDistrict);
      return;
    }

    if (!GisStationsStaticDistrict.Points || !Array.isArray(GisStationsStaticDistrict.Points)) {
      console.warn(
        "⚠️ GisStationsStaticDistrict.Points ist nicht vorhanden oder kein Array.",
        GisStationsStaticDistrict
      );
      return;
    }

    const seenNames = new Set();
    const filteredAreas = GisStationsStaticDistrict.Points.filter(item => {
      if (!item.Area_Name) return false; // Sicherstellen, dass Area_Name existiert
      const isUnique = !seenNames.has(item.Area_Name);
      if (isUnique) {
        seenNames.add(item.Area_Name);
      }
      return isUnique;
    });
    if (process.env.NEXT_PUBLIC_DEBUG_LOG === "true") {
      console.log("📌 stationListing aktualisiert:", filteredAreas);
    }
  }, [GisStationsStaticDistrict, GisSystemStatic]);
  //---------------------------
  useEffect(() => {
    const next = (GisStationsStaticDistrict.Points || []).map(p => p.Area_Name).join("|");
    const current = stationListing.map(s => s.name).join("|");
    if (next !== current) {
      setStationListing(
        GisStationsStaticDistrict.Points.map((area, index) => ({
          id: index + 1,
          name: area.Area_Name,
        }))
      );
    }
  }, [GisStationsStaticDistrict]);

  //---------------------------
  return (
    <div
      id="mainDataSheet"
      className="absolute top-3 right-3 w-1/6 min-w-[300px] max-w-[400px] z-10 bg-white p-2 rounded-lg shadow-lg"
    >
      <div className="flex flex-col gap-4 p-4">
        <div className="flex items-center justify-between space-x-2">
          <select
            onChange={handleAreaChange}
            id="stationListing"
            className="border-solid-1 p-2 rounded ml-1 font-semibold"
            style={{ minWidth: "150px", maxWidth: "200px" }}
          >
            <option value="Station wählen">Station wählen</option>
            {(GisStationsStaticDistrict.Points || []).map((item, index) => (
              <option key={index} value={item.IdLD}>
                {item.Area_Name}
              </option>
            ))}
          </select>
          <div className="flex items-center space-x-2">
            <EditModeToggle />
            <img
              src="/img/expand-icon.svg"
              alt="Expand"
              className="h-6 w-6 cursor-pointer"
              onClick={handleIconClick}
            />
          </div>
        </div>

        {/* Checkboxen mit Untermenüs */}
        <div className="flex flex-col gap-2">
          {systemListing.map(system => (
            <div key={system.id} className="flex flex-col">
              <div className="flex items-center">
                <input
                  type="checkbox"
                  checked={mapLayersVisibility[system.key] || false}
                  onChange={e => handleCheckboxChange(system.key, e)}
                  id={`system-${system.id}`}
                  disabled={editMode} // Checkbox deaktiviert, wenn editMode aktiv ist
                />
                <label htmlFor={`system-${system.id}`} className="text-sm ml-2">
                  {system.name}
                </label>
              </div>

              {/* Untermenü für TALAS */}
              {system.name === "TALAS" && (
                <div className="ml-6 flex flex-col gap-1">
                  <div className="flex items-center">
                    <input
                      type="checkbox"
                      checked={polylineVisible} // Zustand für Kabelstrecken
                      onChange={handlePolylineCheckboxChange}
                      id="polyline-checkbox"
                    />
                    <label htmlFor="polyline-checkbox" className="text-sm ml-2">
                      Kabelstrecken
                    </label>
                  </div>
                </div>
              )}
            </div>
          ))}

          <div className="flex items-center">
            <input
              type="checkbox"
              checked={poiVisible}
              onChange={handlePoiCheckboxChange}
              id="poi-checkbox"
            />
            <label htmlFor="poi-checkbox" className="text-sm ml-2">
              POIs
            </label>
          </div>

          {/* Areas 
                    <div className="flex items-center">
            <input type="checkbox" checked={areaVisible} onChange={handleAreaCheckboxChange} id="area-checkbox" />
            <label htmlFor="area-checkbox" className="text-sm ml-2">
              Bereiche
            </label>
          </div>
          */}

          {/* Standorte 
                    <div className="flex items-center">
            <input type="checkbox" checked={standordVisible} onChange={handleStandorteCheckboxChange} id="area-checkbox" />
            <label htmlFor="area-checkbox" className="text-sm ml-2">
              Standorte
            </label>
          </div>
          
          */}
        </div>
      </div>
    </div>
  );
}

export default MapLayersControlPanel;