nodeMap/components/DataSheet.js

import React, { useEffect, useState } 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 { poiLayerVisibleState } from "../store/atoms/poiLayerVisibleState";
import EditModeToggle from "./EditModeToggle";
import { polylineLayerVisibleState } from "../store/atoms/polylineLayerVisibleState"; // Import für Polyline-Visibility

function DataSheet() {
  const [poiVisible, setPoiVisible] = useRecoilState(poiLayerVisibleState);
  const setSelectedArea = useSetRecoilState(selectedAreaState);
  const [mapLayersVisibility, setMapLayersVisibility] = useRecoilState(mapLayersState);
  const [stationListing, setStationListing] = useState([]);
  const [systemListing, setSystemListing] = useState([]);
  const GisStationsStaticDistrict = useRecoilValue(gisStationsStaticDistrictState);
  const GisSystemStatic = useRecoilValue(gisSystemStaticState);
  const setZoomTrigger = useSetRecoilState(zoomTriggerState);
  const [polylineVisible, setPolylineVisible] = useRecoilState(polylineLayerVisibleState); // Zustand für Polylines
  useEffect(() => {
    const storedPoiVisible = localStorage.getItem("poiVisible");
    if (storedPoiVisible !== null) {
      setPoiVisible(storedPoiVisible === "true");
    }
    const storedPolylineVisible = localStorage.getItem("polylineVisible");
    if (storedPolylineVisible !== null) {
      setPolylineVisible(storedPolylineVisible === "true");
    }

    const storedMapLayersVisibility = localStorage.getItem("mapLayersVisibility");
    if (storedMapLayersVisibility) {
      setMapLayersVisibility(JSON.parse(storedMapLayersVisibility));
    }
  }, [setPoiVisible, setMapLayersVisibility]);

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

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

    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);
      }
      return isUnique;
    });

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

    const seenSystemNames = new Set();
    const filteredSystems = GisSystemStatic.filter((item) => {
      const formattedName = item.Name.replace(/[\s\-]+/g, "");
      const isUnique = !seenSystemNames.has(formattedName) && item.Allow === 1;
      if (isUnique) {
        seenSystemNames.add(formattedName);
      }
      return isUnique;
    });

    setSystemListing(
      filteredSystems.map((system, index) => ({
        id: index + 1,
        name: system.Name.replace(/[\s\-]+/g, ""),
      }))
    );
  }, [GisStationsStaticDistrict, GisSystemStatic]);

  const handleCheckboxChange = (name, event) => {
    const { checked } = event.target;

    setMapLayersVisibility((prev) => {
      const newState = {
        ...prev,
        [name]: checked,
      };
      localStorage.setItem("mapLayersVisibility", JSON.stringify(newState)); // Store in localStorage
      return newState;
    });
  };

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

  const handleIconClick = () => {
    setSelectedArea("Station wählen");
    setZoomTrigger((current) => current + 1);
  };
  const handlePolylineCheckboxChange = (event) => {
    const { checked } = event.target;
    setPolylineVisible(checked);
    localStorage.setItem("polylineVisible", checked); // Store Polyline visibility in localStorage
  };

  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>
            {stationListing.map((station) => (
              <option key={station.id} value={station.id}>
                {station.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 in einem gemeinsamen Container */}
        <div className="flex flex-col gap-2">
          {systemListing.map((system) => (
            <React.Fragment key={system.id}>
              <div className="flex items-center">
                <input type="checkbox" checked={mapLayersVisibility[system.name] || false} onChange={(e) => handleCheckboxChange(system.name, e)} id={`system-${system.id}`} />
                <label htmlFor={`system-${system.id}`} className="text-sm ml-2">
                  {system.name}
                </label>
              </div>
            </React.Fragment>
          ))}

          <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>

          <div className="flex items-center">
            <input type="checkbox" checked={polylineVisible} onChange={handlePolylineCheckboxChange} id="polyline-checkbox" />
            <label htmlFor="polyline-checkbox" className="text-sm ml-2">
              Kabelstrecken
            </label>
          </div>
        </div>
      </div>
    </div>
  );
}

export default DataSheet;