CPLv4.0/components/modales/kueModal/TDRPopup.tsx

"use client"; // components/modules/KueModal/TDRChartActionBar.tsx
import React, { useState, useEffect, useRef } from "react";
import ReactModal from "react-modal";
import Chart from "chart.js/auto";
import { useSelector } from "react-redux";
import KueModal from "../../modales/kueModal/KueModal";
import "bootstrap-icons/font/bootstrap-icons.css"; // Import Bootstrap Icons
import { RootState } from "../../../redux/store";
import { DataTDR } from "../../../redux/types/chartDataTypesTDR";
import { useDispatch } from "react-redux";
import {
  setSelectedChartData,
  setSelectedFileName,
} from "../../../redux/slices/variablesSlice";
const TDRChartActionBar: React.FC = () => {
  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 dispatch = useDispatch(); // Redux-Dispatch

  const getYearFolderName = (year: number): string => {
    return `Year_${String(year).slice(-2)}`;
  };

  const [sortAscending, setSortAscending] = useState(true);

  // Fetch directory.json basierend auf Jahr und Monat
  useEffect(() => {
    const loadDirectory = async () => {
      const yearFolder = getYearFolderName(jahr);
      const monthFolder = `Month_${monat.toString().padStart(2, "0")}`;
      const path = `/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/directory.json`;

      console.log("Verwendeter Pfad:", path);

      try {
        const response = await fetch(path);
        if (!response.ok) {
          console.error(
            `Fehler beim Laden der Datei directory.json. HTTP-Status: ${response.status}`
          );
          setDateiListe([]); // Setze eine leere Liste
          return;
        }

        const data = await response.json();
        const files = data.files.map(
          (file: { filename: string }) => file.filename
        );
        setDateiListe(files);
      } catch (error) {
        console.error("Fehler beim Laden der Datei directory.json:", error);
      }
    };

    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 loadAndStoreChartData = async (url: string) => {
    try {
      const response = await fetch(url);
      if (!response.ok) {
        console.error(
          `Fehler beim Laden der Daten. HTTP-Status: ${response.status}`
        );
        return;
      }
      const data = await response.json();
      dispatch(setSelectedChartData(data));
      console.log("Daten erfolgreich in Redux gespeichert:", data);
    } catch (error) {
      console.error("Fehler beim Laden der JSON-Daten:", error);
    }
  };
  const handleLoadData = (filename: string) => {
    const yearFolder = `Year_${jahr.toString().slice(-2)}`;
    const monthFolder = `Month_${monat.toString().padStart(2, "0")}`;
    const filePath = `/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/${filename}`;
    loadAndStoreChartData(filePath);
  };
  const handleDateiAuswahl = (event: React.ChangeEvent<HTMLSelectElement>) => {
    const selectedFile = event.target.value;
    setAusgewählteDatei(selectedFile);
    console.log("Ausgewählte Datei:", selectedFile);

    // Datei in Redux speichern
    dispatch(setSelectedFileName(selectedFile));

    // Lade die Datei und speichere sie in Redux
    handleLoadData(selectedFile);
  };

  const loadSelectedFileData = async (filename: string) => {
    const yearFolder = getYearFolderName(jahr);
    const monthFolder = `Month_${monat.toString().padStart(2, "0")}`;

    try {
      const response = await fetch(
        `/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/${filename}`
      );

      if (response.ok) {
        const data: DataTDR[] = await response.json();
        console.log("Geladene Daten:", data);

        // Redux-Action zum Speichern der Daten aufrufen
        dispatch(setSelectedChartData(data));
      } 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 TDRChartActionBar;