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

function DataSheet() {
  const [layers, setLayers] = useRecoilState(mapLayersState);
  const [uniqueAreas, setUniqueAreas] = useState([]);
  const [uniqueSystems, setUniqueSystems] = useState([]);
  const [stationListing, setStationListing] = useState([]);
  const [systemListing, setSystemListing] = useState([]);
  const GisStationsStaticDistrict = useRecoilValue(
    gisStationsStaticDistrictState
  );
  const GisSystemStatic = useRecoilValue(gisSystemStaticState);

  useEffect(() => {
    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;
    });
    setUniqueAreas(filteredAreas);

    const seenSystemNames = new Set();
    const filteredSystems = GisSystemStatic.filter((item) => {
      const isUnique = !seenSystemNames.has(item.Name);
      if (isUnique) {
        seenSystemNames.add(item.Name);
      }
      return isUnique;
    });
    setUniqueSystems(filteredSystems);

    const newStationListing = filteredAreas
      .map((area, index) => ({ id: index + 1, name: area.Area_Name }))
      .sort((a, b) => a.name.localeCompare(b.name));
    setStationListing(newStationListing);

    const newSystemListing = filteredSystems.map((system, index) => ({
      id: index + 1,
      name: system.Name.replace(/[^a-zA-Z0-9]/g, ""), // Ersetzen von Sonderzeichen
      displayName: system.Name, // Beibehalten des originalen Namens für die Anzeige
    }));
    setSystemListing(newSystemListing);

    console.log("Station Listing:", newStationListing);
    console.log("System Listing:", newSystemListing);
  }, [GisStationsStaticDistrict, GisSystemStatic]);

  const handleCheckboxChange = (layerKey) => {
    console.log(
      `Ändern der Sichtbarkeit für: ${layerKey}, aktueller Wert: ${layers[layerKey]}`
    );
    setLayers((prevLayers) => {
      const newLayers = {
        ...prevLayers,
        [layerKey]: !prevLayers[layerKey],
      };
      console.log(`Neuer Wert für ${layerKey}: ${newLayers[layerKey]}`);
      return newLayers;
    });
  };

  const handleStationChange = (event) => {
    console.log("Ausgewählte Station:", event.target.value);
  };

  const resetView = () => {
    console.log("Ansicht wird zurückgesetzt.");
  };

  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={handleStationChange}
            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>
        {systemListing.map((station) => (
          <div key={station.id} className="flex items-center">
            <input
              type="checkbox"
              id={`box-${station.id}`}
              className="accent-blue-500 checked:bg-blue-500"
              checked={layers[`show_${station.name}`] || false}
              onChange={() => handleCheckboxChange(`show_${station.name}`)}
            />
            <label
              htmlFor={`box-${station.id}`}
              className="text-sm font-bold ml-2"
            >
              {station.name}
            </label>
          </div>
        ))}
      </div>
    </div>
  );
}

export default DataSheet;