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

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

  // Zustand für das Dropdown-Menü zur Auswahl von DIA-Modus (Alle, Stunden, Tage)
  const [selectedMode, setSelectedMode] = useState<"DIA0" | "DIA1" | "DIA2">(
    "DIA0"
  );

  // Zustand für das Dropdown-Menü zur Auswahl des Slot-Typs (Isolations- oder Schleifenwiderstand)
  const [selectedSlotType, setSelectedSlotType] = useState<
    "isolationswiderstand" | "schleifenwiderstand"
  >("schleifenwiderstand");

  // Zustand für das Datum
  const [vonDatum, setVonDatum] = useState("2025;01;01");
  const [bisDatum, setBisDatum] = useState("2025;07;31");

  // Slot-Werte
  const isolationswiderstand = 3;
  const schleifenwiderstand = 4;

  /**
   * Dynamische API-URL-Erstellung für Entwicklung und Produktion
   * @param mode - DIA0, DIA1 oder DIA2
   * @param slotIndex - Slot für die Abfrage
   */
  const getApiUrl = (mode: "DIA0" | "DIA1" | "DIA2", slotIndex: number) => {
    const baseUrl =
      process.env.NODE_ENV === "development"
        ? `/api/mockChartData?${mode}=true`
        : `/CPL?seite.ACP&${mode}=${vonDatum};${bisDatum};${slotIndex}`;

    return baseUrl;
  };

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

    try {
      const apiUrl = getApiUrl(selectedMode, slotIndex);
      const response = await fetch(apiUrl);
      const data = await response.json();

      if (Array.isArray(data)) {
        console.log("Daten geladen:", data);
        dispatch(setChartData(data));
      } else {
        console.error("Erwartetes Array, aber erhalten:", data);
      }
    } catch (error) {
      console.error("Fehler beim Laden der Daten:", error);
    }
  };

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

      {/* Dropdown für DIA-Modus */}
      <select
        value={selectedMode}
        onChange={(e) =>
          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) =>
          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>

      {/* Daten abrufen */}
      <button
        onClick={handleFetchData}
        className="px-3 py-1 bg-green-500 text-white rounded text-sm"
      >
        Daten Laden
      </button>
    </div>
  );
};

export default LoopChartActionBar;