import React, { useEffect, useState } from "react";
import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
import { gisStationsStaticDistrictState } from "../redux/slices/gisStationsStaticDistrictSlice";
import { gisSystemStaticState } from "../redux/slices/gisSystemStaticSlice";
import { mapLayersState } from "../redux/slices/mapLayersSlice";
import { selectedAreaState } from "../redux/slices/selectedAreaSlice";
import { zoomTriggerState } from "../redux/slices/zoomTriggerSlice.js";
import { poiLayerVisibleState } from "../redux/slices/poiLayerVisibleSlice";
import EditModeToggle from "./EditModeToggle";
import { polylineLayerVisibleState } from "../redux/slices/polylineLayerVisibleSlice"; // Import für Polyline-Visibility
import { useSelector } from "react-redux";
import { selectGisStationsStaticDistrict } from "../redux/slices/gisStationsStaticDistrictSlice";

function DataSheet() {
  const [editMode, setEditMode] = useState(false); // Zustand für editMode
  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 GisStationsStaticDistrict = useSelector(selectGisStationsStaticDistrict);
  const GisSystemStatic = useRecoilValue(gisSystemStaticState);
  const setZoomTrigger = useSetRecoilState(zoomTriggerState);
  const [polylineVisible, setPolylineVisible] = useRecoilState(polylineLayerVisibleState); // Zustand für Polylines
  const [bereicheVisible, setBereicheVisible] = useState(false); // NEU: Bereiche-Status
  const [standordVisible, setStandorteVisible] = useState(false); // NEU: Standorte-Status
  useEffect(() => {
    // LocalStorage Werte laden
    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));
    }

    // EditMode lesen
    const storedEditMode = localStorage.getItem("editMode");
    setEditMode(storedEditMode === "true");
  }, [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 isUnique = !seenSystemNames.has(item.Name) && item.Allow === 1;
      if (isUnique) {
        seenSystemNames.add(item.Name);
      }
      return isUnique;
    });

    setSystemListing(
      filteredSystems.map((system, index) => ({
        id: index + 1,
        name: system.Name, // Verwende den Originalnamen für die Anzeige
        key: system.Name.replace(/[\s\-]+/g, ""), // Internen Schlüssel für die MapLayersVisibility-Logik
      }))
    );
  }, [GisStationsStaticDistrict, GisSystemStatic]);

  const handleCheckboxChange = (key, event) => {
    if (editMode) return; // Checkbox deaktiviert bei aktivem EditMode
    const { checked } = event.target;

    // Aktualisiere `polylineVisible` separat
    if (key === "TALAS" && !checked) {
      setPolylineVisible(false); // Setze den Zustand von Kabelstrecken auf false
      localStorage.setItem("polylineVisible", false); // Synchronisiere mit localStorage
    }

    // Aktualisiere `mapLayersVisibility`
    setMapLayersVisibility((prev) => {
      const newState = {
        ...prev,
        [key]: checked,
      };

      localStorage.setItem("mapLayersVisibility", JSON.stringify(newState));
      return newState;
    });

    // Manuell die Überprüfung der Marker aktualisieren
    setTimeout(() => {
      const event = new Event("visibilityChanged");
      window.dispatchEvent(event);
    }, 0);
  };

  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;

    // Setze den Zustand von Kabelstrecken
    setPolylineVisible(checked);
    localStorage.setItem("polylineVisible", checked);

    // Wenn Kabelstrecken aktiviert werden, aktiviere TALAS
    if (checked) {
      setMapLayersVisibility((prev) => {
        const newState = {
          ...prev,
          TALAS: true,
        };
        localStorage.setItem("mapLayersVisibility", JSON.stringify(newState));
        return newState;
      });
    }
  };

  //---------------------------
  const handleBereicheCheckboxChange = (event) => {
    if (editMode) return;
    const { checked } = event.target;
    setBereicheVisible(checked);
    localStorage.setItem("bereicheVisible", checked);
  };
  const handleStandorteCheckboxChange = (event) => {
    if (editMode) return;
    const { checked } = event.target;
    setStandorteVisible(checked);
    localStorage.setItem("standorteVisible", checked);
  };

  //---------------------------
  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 mit Untermenüs */}
        <div className="flex flex-col gap-2">
          {systemListing.map((system) => (
            <div key={system.id} className="flex flex-col">
              <div className="flex items-center">
                <input
                  type="checkbox"
                  checked={mapLayersVisibility[system.key] || false}
                  onChange={(e) => handleCheckboxChange(system.key, e)}
                  id={`system-${system.id}`}
                  disabled={editMode} // Checkbox deaktiviert, wenn editMode aktiv ist
                />
                <label htmlFor={`system-${system.id}`} className="text-sm ml-2">
                  {system.name}
                </label>
              </div>

              {/* Untermenü für TALAS */}
              {system.name === "TALAS" && (
                <div className="ml-6 flex flex-col gap-1">
                  <div className="flex items-center">
                    <input
                      type="checkbox"
                      checked={polylineVisible} // Zustand für Kabelstrecken
                      onChange={handlePolylineCheckboxChange}
                      id="polyline-checkbox"
                    />
                    <label htmlFor="polyline-checkbox" className="text-sm ml-2">
                      Kabelstrecken
                    </label>
                  </div>
                </div>
              )}
            </div>
          ))}

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

          {/* Bereiche 
                    <div className="flex items-center">
            <input type="checkbox" checked={bereicheVisible} onChange={handleBereicheCheckboxChange} id="bereiche-checkbox" />
            <label htmlFor="bereiche-checkbox" className="text-sm ml-2">
              Bereiche
            </label>
          </div>
          */}

          {/* Standorte 
                    <div className="flex items-center">
            <input type="checkbox" checked={standordVisible} onChange={handleStandorteCheckboxChange} id="bereiche-checkbox" />
            <label htmlFor="bereiche-checkbox" className="text-sm ml-2">
              Standorte
            </label>
          </div>
          
          */}
        </div>
      </div>
    </div>
  );
}

export default DataSheet;