import React, { useState } from "react";
import DateRangePicker from "./DateRangePicker";

const LoopTDRChartActionBar: React.FC = () => {
  const [vonDatum, setVonDatum] = useState(new Date());
  const [bisDatum, setBisDatum] = useState(new Date());

  const handleAktualisieren = () => {
    const von = vonDatum.toISOString().split("T")[0]; // Format: YYYY-MM-DD
    const bis = bisDatum.toISOString().split("T")[0];

    console.log(`Daten abrufen für Zeitraum: ${von} bis ${bis}`);
    // API-Call hier mit den neuen Daten (z.B. location.href="...&DIA1=von;bis")
    const host = window.location.host;
    //const testUrl = `https://${host}?DIA1=${von};${bis}`;
    const testUrl =
      "https://10.10.0.118/CPL?kabelueberwachung&DIA1=2025;01;01;2025;07;31;2;4";
  };

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

      <button
        onClick={handleAktualisieren}
        className="px-3 py-1 bg-green-500 text-white rounded text-sm"
      >
        Aktualisieren
      </button>
    </div>
  );
};

export default LoopTDRChartActionBar;