import React, { useEffect, useState } from "react";
import { useRecoilValue } from 'recoil';
import { gisStationsStaticDistrictState } from '../features/gisStationState';

function DataSheet() {
  const GisStationsStaticDistrict = useRecoilValue(gisStationsStaticDistrictState);
  useEffect(() => {
    console.log('GisStationsStaticDistrict in DataSheet:', GisStationsStaticDistrict);
  }, [GisStationsStaticDistrict]);
  const stationListing = [
    { id: 1, name: "Ammersricht BZR (FGN)" },
    { id: 2, name: "Bad-Bentheim" },
    { id: 3, name: "Gevelsberg" },
    { id: 4, name: "Köln" },
    { id: 5, name: "Olfen-Selm" },
    { id: 6, name: "Plettenberg" },
    { id: 7, name: "Renzenhof (RG)" },
    { id: 8, name: "Schlüchtern II" },
    { id: 9, name: "Wuppertal" },
    // Füge hier weitere Stationen hinzu, falls nötig
  ];

  const [checkedStations, setCheckedStations] = useState(
    stationListing.reduce((acc, station) => {
      acc[station.id] = false;
      return acc;
    }, {})
  );

  const handleCheckboxChange = (id) => {
    setCheckedStations((prev) => ({
      ...prev,
      [id]: !prev[id],
    }));
  };

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

  const resetView = () => {
    console.log("View has been reset");
  };

  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 ">
          {/* Dropdown */}
          <select
            onChange={handleStationChange}
            id="stationListing"
            className="border-solid-1 p-2 rounded ml-1 " // Margin Left für Abstand zum Icon
          >
            <option>Station wählen</option>
            {stationListing.map((station) => (
              <option key={station.id} value={station.id}>
                {station.name}
              </option>
            ))}
          </select>
          {/* Icon */}
          <img
            src="/img/expand-icon.svg" // Pfad zu deinem SVG-Bild
            alt="Expand"
            className="h-6 w-6 ml-2" // Margin Left für Abstand zum Dropdown
          />
        </div>

        {/* Liste der Stationen mit Checkboxen */}
        {stationListing.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={checkedStations[station.id]}
              onChange={() => handleCheckboxChange(station.id)}
            />
            <label
              htmlFor={`box-${station.id}`}
              className="text-sm font-bold ml-2"
            >
              {station.name}
            </label>
          </div>
        ))}
      </div>
    </div>
  );
}

export default DataSheet;