// components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopChartActionBar.tsx
import React, { useState } from "react";
import DateRangePicker from "../DateRangePicker";
import LoopMeasurementChart from "./LoopMeasurementChart";
import { useDispatch } from "react-redux";
import { setChartData } from "../../../../../../redux/slices/chartDataSlice";

const LoopChartActionBar: React.FC = () => {
  const dispatch = useDispatch();
  const [showChart, setShowChart] = useState(false);

  const handleFetchData = async () => {
    try {
      const response = await fetch("/mockData.json");
      const data = await response.json();
      if (Array.isArray(data)) {
        // data ist ein Array und kann mit .map() verwendet werden
        console.log("Daten geladen:", data);
      } else {
        console.error("Erwartetes Array, aber erhalten:", data);
      }
      dispatch(setChartData(data));
      setShowChart(true);
    } catch (error) {
      console.error("Fehler beim Laden der Daten:", error);
      if (error instanceof Response) {
        const errorMessage = await error.text();
        console.error("Fehlermeldung vom Server:", errorMessage);
      }
    }
  };

  return (
    <div className="flex justify-end items-center p-2 bg-gray-100 rounded-lg space-x-2">
      <DateRangePicker setVonDatum={() => {}} setBisDatum={() => {}} />
      <button
        onClick={handleFetchData}
        className="px-3 py-1 bg-green-500 text-white rounded text-sm"
      >
        Aktualisieren
      </button>
      {showChart && <LoopMeasurementChart />}
    </div>
  );
};

export default LoopChartActionBar;