nodeMap/components/DataSheet.js

import React, { useEffect, useState } from "react";
import { useRecoilState, useRecoilValue } from "recoil";
import { gisStationsStaticDistrictState } from "../store/gisStationState";
import { gisSystemStaticState } from "../store/gisSystemState";
import { mapLayersState } from "../store/mapLayersState";

function DataSheet() {
  const [mapLayersVisibility, setMapLayersVisibility] =
    useRecoilState(mapLayersState);
  const [stationListing, setStationListing] = useState([]);
  const [systemListing, setSystemListing] = useState([]);
  const GisStationsStaticDistrict = useRecoilValue(
    gisStationsStaticDistrictState
  );
  const GisSystemStatic = useRecoilValue(gisSystemStaticState);

  useEffect(() => {
    // Filter unique areas
    const seenNames = new Set();
    const filteredAreas = GisStationsStaticDistrict.filter((item) => {
      const isUnique = !seenNames.has(item.Area_Name);
      if (isUnique) {
        seenNames.add(item.Area_Name);
      }
      return isUnique;
    });

    // Filter unique systems where Allow is 1
    const seenSystemNames = new Set();
    const filteredSystems = GisSystemStatic.filter((item) => {
      const isUnique = !seenSystemNames.has(item.Name) && item.Allow === 1;
      if (isUnique) {
        seenSystemNames.add(item.Name);
      }
      return isUnique;
    });

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

    setSystemListing(
      filteredSystems.map((system, index) => ({
        id: index + 1,
        name: system.Name,
      }))
    );
  }, [GisStationsStaticDistrict, GisSystemStatic]);

  const handleCheckboxChange = (name, event) => {
    const { checked } = event.target;
    setMapLayersVisibility((prev) => ({
      ...prev,
      [name]: checked,
    }));
  };

  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
            onChange={(event) =>
              console.log("Station selected:", event.target.value)
            }
            id="stationListing"
            className="border-solid-1 p-2 rounded ml-1"
          >
            <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"
          />
        </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 font-bold ml-2">{system.name}</label>
              <br />
            </React.Fragment>
          ))}
        </div>
      </div>
    </div>
  );
}

export default DataSheet;