// /components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChartActionBar.tsx
import React, { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { RootState } from "../../../../../../redux/store";
import { fetchTDRChartDataById } from "../../../../../../services/fetchTDRChartDataById";
import {
  setTDRChartDataById,
  setSelectedTDRId,
} from "../../../../../../redux/slices/tdrDataByIdSlice";

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

  const tdmChartData = useSelector((state: RootState) => state.tdmChart.data);
  const selectedSlot = useSelector(
    (state: RootState) => state.kueChartMode.selectedSlot
  );

  const idsForSlot =
    selectedSlot !== null ? tdmChartData[selectedSlot] ?? [] : [];

  const [selectedId, setSelectedId] = useState<number | null>(null);

  const handleSelectChange = async (
    e: React.ChangeEvent<HTMLSelectElement>
  ) => {
    const id = parseInt(e.target.value);
    setSelectedId(id);

    const data = await fetchTDRChartDataById(id);
    if (!data) return;

    dispatch(setTDRChartDataById({ id, data }));
    dispatch(setSelectedTDRId(id)); // 👉 wichtig!
  };

  return (
    <div className="flex flex-wrap justify-end items-center p-2 bg-gray-100 rounded-lg space-x-2">
      {idsForSlot.length > 0 && (
        <>
          <label htmlFor="tdrIdSelect" className="text-sm font-semibold">
            Messung ID
          </label>
          <select
            id="tdrIdSelect"
            value={selectedId ?? ""}
            onChange={handleSelectChange}
            className="border rounded px-2 py-1 text-sm"
          >
            <option value="">-- Wähle Messung --</option>
            {idsForSlot.map((entry) => (
              <option key={entry.id} value={entry.id}>
                ID {entry.id} – {entry.t}
              </option>
            ))}
          </select>
        </>
      )}
    </div>
  );
};

export default TDRChartActionBar;