import React, { useState, useEffect } from "react";

const TDRPopup = () => {
  const [jahr, setJahr] = useState(new Date().getFullYear());
  const [monat, setMonat] = useState(new Date().getMonth() + 1);
  const [dateiListe, setDateiListe] = useState<string[]>([]); // Liste der Dateien
  const [ausgewählteDatei, setAusgewählteDatei] = useState<string>(""); // Ausgewählte Datei
  const [sortAscending, setSortAscending] = useState(true);

  // Fetch directory.json basierend auf Jahr und Monat
  useEffect(() => {
    const loadDirectory = async () => {
      try {
        const response = await fetch(
          `/CPLmockData/LastTDR/kue_01/Year_${jahr}/Month_${monat
            .toString()
            .padStart(2, "0")}/directory.json`
        );
        if (response.ok) {
          const data = await response.json();
          const files = data.files.map(
            (file: { filename: string }) => file.filename
          );
          setDateiListe(files); // Dateien setzen
        } else {
          console.error("Fehler beim Laden der Datei directory.json");
          setDateiListe([]); // Leere Liste bei Fehler
        }
      } catch (error) {
        console.error("Fehler beim Laden der Datei directory.json:", error);
        setDateiListe([]);
      }
    };

    loadDirectory();
  }, [jahr, monat]);

  const handleSortToggle = () => {
    setSortAscending(!sortAscending);
    setDateiListe((prevListe) =>
      [...prevListe].sort((a, b) =>
        sortAscending ? a.localeCompare(b) : b.localeCompare(a)
      )
    );
  };

  const handleAktualisieren = () => {
    console.log("Daten werden aktualisiert für:", jahr, monat);
  };

  const handleDateiAuswahl = (event: React.ChangeEvent<HTMLSelectElement>) => {
    setAusgewählteDatei(event.target.value);
    console.log("Ausgewählte Datei:", event.target.value);
    // Hier kannst du die Logik hinzufügen, um die Datei zu laden und die Diagrammdaten zu aktualisieren
    loadSelectedFileData(event.target.value);
  };

  // Laden der ausgewählten Datei
  const loadSelectedFileData = async (filename: string) => {
    try {
      const response = await fetch(
        `/CPLmockData/LastTDR/kue_01/Year_${jahr}/Month_${monat
          .toString()
          .padStart(2, "0")}/${filename}`
      );
      if (response.ok) {
        const data = await response.json();
        console.log("Geladene Daten:", data);
        // Hier kannst du die Daten für das Diagramm verwenden
      } else {
        console.error("Fehler beim Laden der Datei:", filename);
      }
    } catch (error) {
      console.error("Fehler beim Laden der Datei:", error);
    }
  };

  return (
    <div className="flex flex-wrap justify-end items-center p-2 bg-gray-100 rounded-lg space-x-2 mr-4">
      <div className="flex items-center space-x-2">
        <label htmlFor="jahrSelect" className="text-sm font-semibold">
          Jahr
        </label>
        <select
          id="jahrSelect"
          className="border rounded px-2 py-1"
          value={jahr}
          onChange={(e) => setJahr(Number(e.target.value))}
        >
          {Array.from({ length: 11 }, (_, i) => 2020 + i).map((year) => (
            <option key={year} value={year}>
              {year}
            </option>
          ))}
        </select>
      </div>

      <div className="flex items-center space-x-2">
        <label htmlFor="monatSelect" className="text-sm font-semibold">
          Monat
        </label>
        <select
          id="monatSelect"
          className="border rounded px-2 py-1"
          value={monat}
          onChange={(e) => setMonat(Number(e.target.value))}
        >
          {Array.from({ length: 12 }, (_, i) => i + 1).map((month) => (
            <option key={month} value={month}>
              {month.toString().padStart(2, "0")}
            </option>
          ))}
        </select>
      </div>

      <div className="flex items-center space-x-2">
        <label htmlFor="dateiSelect" className="text-sm font-semibold">
          Auswahl
        </label>
        <select
          id="dateiSelect"
          className="border rounded px-2 py-1"
          value={ausgewählteDatei}
          onChange={handleDateiAuswahl}
        >
          <option value="" disabled>
            Bitte wählen...
          </option>
          {dateiListe.map((file, index) => (
            <option key={index} value={file}>
              {file}
            </option>
          ))}
        </select>
      </div>

      <button
        onClick={handleSortToggle}
        className="flex items-center justify-center px-3 py-1 bg-blue-500 text-white rounded text-sm"
      >
        <i className={`bi bi-arrow-${sortAscending ? "down" : "up"}-short`} />
        <span className="ml-1">Sortieren</span>
      </button>

      <button
        onClick={handleAktualisieren}
        className="px-3 py-1 bg-green-500 text-white rounded text-sm"
      >
        Aktualisieren
      </button>
    </div>
  );
};

export default TDRPopup;