nodeMap/components/DataSheet.js

//components/DataSheet.js
import React, { useEffect, useState, useCallback } from "react";
import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
import { gisStationsStaticDistrictState } from "../store/atoms/gisStationState";
import { gisSystemStaticState } from "../store/atoms/gisSystemState";
import { mapLayersState } from "../store/atoms/mapLayersState";
import { selectedAreaState } from "../store/atoms/selectedAreaState";
import { zoomTriggerState } from "../store/atoms/zoomTriggerState";
import { debounce } from "lodash"; // Lodash-Bibliothek für die Debounce-Funktion

function DataSheet() {
  const [disableZoom, setDisableZoom] = useState(false);
  const setSelectedArea = useSetRecoilState(selectedAreaState);
  const [mapLayersVisibility, setMapLayersVisibility] =
    useRecoilState(mapLayersState);
  const [stationListing, setStationListing] = useState([]);
  const [systemListing, setSystemListing] = useState([]);
  const [selectedStation, setSelectedStation] = useState(""); // Neuer State für den ausgewählten Station-Wert

  const GisStationsStaticDistrict = useRecoilValue(
    gisStationsStaticDistrictState
  );
  const GisSystemStatic = useRecoilValue(gisSystemStaticState);
  // In deiner Dropdown onChange Funktion
  const handleAreaChange = (event) => {
    setSelectedStation(event.target.value);
    const selectedIndex = event.target.options.selectedIndex;
    const areaName = event.target.options[selectedIndex].text;
    setDisableZoom(true);
    setSelectedArea(areaName);
    console.log("Selected area normal:", areaName);
    setTimeout(() => setDisableZoom(false), 1000);
  };

  useEffect(() => {
    // Identify allowed system IDs
    const allowedSystems = new Set(
      GisSystemStatic.filter((system) => system.Allow === 1).map(
        (system) => system.IdSystem
      )
    );
    //console.log("allowedSystems:", allowedSystems);

    // Filter unique areas that belong to allowed systems
    const seenNames = new Set();
    const filteredAreas = GisStationsStaticDistrict.filter((item) => {
      const isUnique =
        !seenNames.has(item.Area_Name) && allowedSystems.has(item.System);
      if (isUnique) {
        seenNames.add(item.Area_Name);
        //console.log("Unique area:", item.Area_Name); //Dropdown menu
      }
      return isUnique;
    });
    //console.log("GisStationsStaticDistrict:", GisStationsStaticDistrict);

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

    // Prepare system listings as before
    const seenSystemNames = new Set();
    const filteredSystems = GisSystemStatic.filter((item) => {
      // Entferne alle Leerzeichen und Bindestriche aus dem Namen
      const formattedName = item.Name.replace(/[\s\-]+/g, "");
      const isUnique = !seenSystemNames.has(formattedName) && item.Allow === 1;
      if (isUnique) {
        seenSystemNames.add(formattedName); // Füge den formatierten Namen hinzu
        //console.log("Unique system in DataSheet:", formattedName); // Zeige den formatierten Namen in der Konsole
      }
      return isUnique;
    });

    setSystemListing(
      filteredSystems.map((system, index) => ({
        id: index + 1,
        name: system.Name.replace(/[\s\-]+/g, ""), // Auch hier Leerzeichen und Bindestriche entfernen
      }))
    );
  }, [GisStationsStaticDistrict, GisSystemStatic]);
  //---------------------------------------------------------
  const handleCheckboxChange = (name, event) => {
    event.stopPropagation();
    const { checked } = event.target;
    setDisableZoom(true);
    setMapLayersVisibility((prev) => ({
      ...prev,
      [name]: checked,
    }));
    setTimeout(() => setDisableZoom(false), 1000); // Erhöhen Sie die Verzögerung
  };

  //---------------------------------------------------------
  const setZoomTrigger = useSetRecoilState(zoomTriggerState);

  // Debounce-Funktion zum Verhindern von zu schnellen Zoom-Auslösungen
  const debouncedSetZoomTrigger = useCallback(
    debounce(() => {
      setZoomTrigger((current) => current + 1);
    }, 300),
    [setZoomTrigger]
  ); // 300 Millisekunden Verzögerung

  const handleIconClick = () => {
    if (selectedStation !== "Station wählen" && !disableZoom) {
      console.log("Icon clicked, valid station selected, triggering zoom.");
      debouncedSetZoomTrigger();
    } else {
      console.log(
        "No zoom triggered due to either 'Station wählen' or disableZoom state."
      );
    }
    setSelectedStation("Station wählen"); // Dies setzt das Dropdown-Menü zurück auf den Standardwert
  };

  useEffect(() => {
    console.log("Selected station has changed to:", selectedStation);
    // Führen Sie hier weitere Aktionen basierend auf dem neuen Wert von selectedStation aus
  }, [selectedStation]); // Abhängigkeit zu selectedStation hinzufügen
  //---------------------------------------------------------
  /*   useEffect(() => {
    if (!disableZoom) {
      console.log("Zoom enabled, ready to trigger zoom.");
      // Stellen Sie hier Ihre Logik bereit, um den Zoom zu triggern, wenn dies zulässig ist
      debouncedSetZoomTrigger();
    } else {
      console.log("Zoom disabled, no action will be taken.");
    }
  }, [disableZoom]); // Reagiert nur auf Änderungen von disableZoom */

  //---------------------------------------------------------

  return (
    <div
      id="mainDataSheet"
      className="absolute top-3 right-3 w-1/6 min-w-[300px] 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">
          <select
            value={selectedStation} // Binden des Wertes an den State
            onChange={handleAreaChange} // Verwenden der neuen handleAreaChange Funktion
            id="stationListing"
            className="border-solid-1 p-2 rounded ml-1  font-semibold"
          >
            <option>Station wählen</option>
            {stationListing.map((station) => (
              <option key={station.id} value={station.id}>
                {station.name}
              </option>
            ))}
          </select>
          <img
            src="/img/expand-icon.svg"
            alt="Expand"
            className="h-6 w-6 ml-2 cursor-pointer"
            onClick={handleIconClick}
          />
        </div>
        <div>
          {systemListing.map((system) => (
            <React.Fragment key={system.id}>
              <input
                type="checkbox"
                checked={mapLayersVisibility[system.name] || false}
                onChange={(e) => handleCheckboxChange(system.name, e)}
              />
              <label className="text-sm ml-2">{system.name}</label>
              <br />
            </React.Fragment>
          ))}
        </div>
      </div>
    </div>
  );
}

export default DataSheet;