CPLv4.0/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx

// components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx
import React, { useEffect } from "react";
import DateRangePicker from "../DateRangePicker";
import { useDispatch, useSelector } from "react-redux";
import { RootState } from "../../../../../../redux/store";
import {
  setVonDatum,
  setBisDatum,
  setChartData,
  setSelectedMode,
  setSelectedSlotType,
  setChartOpen,
} from "../../../../../../redux/slices/kabelueberwachungChartSlice";

const LoopChartActionBar: React.FC = () => {
  const dispatch = useDispatch();

  // Redux-Status abrufen
  const { vonDatum, bisDatum, selectedMode, selectedSlotType, isChartOpen } =
    useSelector((state: RootState) => state.kabelueberwachungChart);

  /**
   * API-URL-Erstellung für Entwicklung und Produktion
   */
  const getApiUrl = (mode: "DIA0" | "DIA1" | "DIA2", type: number) => {
    return process.env.NODE_ENV === "development"
      ? `/CPLmockData/kuesChartData/${mode}_${type}.json`
      : `/CPL?seite.ACP&${mode}=${vonDatum};${bisDatum};${type}`;
  };

  /**
   * Funktion zum Laden der Messwerte
   */
  const handleFetchData = async () => {
    const type = selectedSlotType === "schleifenwiderstand" ? 4 : 3;

    try {
      const apiUrl = getApiUrl(selectedMode, type);
      console.log("Mock JSON laden von:", apiUrl);

      const response = await fetch(apiUrl);
      if (!response.ok) throw new Error(`Fehler: ${response.status}`);

      const jsonData = await response.json();
      console.log("Geladene Daten:", jsonData);

      if (Array.isArray(jsonData)) {
        dispatch(setChartData(jsonData));

        // Falls das Chart zum ersten Mal geöffnet wird, setze vonDatum & bisDatum
        if (!isChartOpen && jsonData.length > 0) {
          const firstDate = new Date(jsonData[jsonData.length - 1].t);
          const lastDate = new Date(jsonData[0].t);
          dispatch(setVonDatum(firstDate.toISOString().split("T")[0]));
          dispatch(setBisDatum(lastDate.toISOString().split("T")[0]));
          dispatch(setChartOpen(true)); // Setze den Schalter auf "geöffnet"
        }
      } else {
        console.error("Erwartetes Array, aber erhalten:", jsonData);
      }
    } catch (error) {
      console.error("Fehler beim Laden der Mock-Daten:", error);
    }
  };

  // **Automatische Datenaktualisierung bei Auswahländerung**
  useEffect(() => {
    handleFetchData();
  }, [selectedMode, selectedSlotType]); // Wird ausgeführt, wenn sich ein Dropdown ändert

  return (
    <div className="flex justify-end items-center p-2 bg-gray-100 rounded-lg space-x-2">
      {/* Datumsauswahl */}
      <DateRangePicker
        setVonDatum={(date) => dispatch(setVonDatum(date))}
        setBisDatum={(date) => dispatch(setBisDatum(date))}
      />

      {/* Dropdown für DIA-Modus */}
      <select
        value={selectedMode}
        onChange={(e) =>
          dispatch(setSelectedMode(e.target.value as "DIA0" | "DIA1" | "DIA2"))
        }
        className="px-3 py-1 bg-white border rounded text-sm"
      >
        <option value="DIA0">Alle Messwerte (DIA0)</option>
        <option value="DIA1">Stündliche Werte (DIA1)</option>
        <option value="DIA2">Tägliche Werte (DIA2)</option>
      </select>

      {/* Dropdown für Slot-Typ */}
      <select
        value={selectedSlotType}
        onChange={(e) =>
          dispatch(
            setSelectedSlotType(
              e.target.value as "isolationswiderstand" | "schleifenwiderstand"
            )
          )
        }
        className="px-3 py-1 bg-white border rounded text-sm"
      >
        <option value="schleifenwiderstand">Schleifenwiderstand</option>
        <option value="isolationswiderstand">Isolationswiderstand</option>
      </select>
    </div>
  );
};

export default LoopChartActionBar;