// components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx
import React, { useEffect, useRef, useState } from "react";
import Chart from "chart.js/auto";
import "chartjs-adapter-date-fns";
import { parseISO } from "date-fns";

const TDRChart: React.FC = () => {
  const chartRef = useRef<HTMLCanvasElement>(null);
  const chartInstance = useRef<Chart | null>(null);

  // Zustand für die Chart-Daten
  const [chartData, setChartData] = useState<
    { timestamp: string; tdr: number }[]
  >([]);

  useEffect(() => {
    // Aktuelles Jahr und Monat ermitteln
    const currentYear = new Date().getFullYear();
    const currentMonth = new Date().getMonth() + 1; // Monate sind 0-basiert

    // Pfad zur directory.json-Datei erstellen
    const yearFolder = `Year_${String(currentYear).slice(-2)}`;
    const monthFolder = `Month_${String(currentMonth).padStart(2, "0")}`;
    const path = `/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/directory.json`;

    // Daten abrufen
    fetch(path)
      .then((response) => {
        if (!response.ok) {
          throw new Error(
            `Fehler beim Laden der Datei: ${response.statusText}`
          );
        }
        return response.json();
      })
      .then((data) => {
        // Annahme: data ist ein Array von Objekten mit den Eigenschaften 'timestamp' und 'tdr'
        setChartData(data);
      })
      .catch((error) => {
        console.error("Fehler beim Abrufen der Daten:", error);
      });
  }, []);

  useEffect(() => {
    if (chartRef.current && chartData.length > 0) {
      if (chartInstance.current) {
        chartInstance.current.destroy();
      }

      const ctx = chartRef.current.getContext("2d");
      if (ctx) {
        chartInstance.current = new Chart(ctx, {
          type: "line",
          data: {
            labels: chartData.map((entry) => parseISO(entry.timestamp)),
            datasets: [
              {
                label: "TDR Entfernung (km)",
                data: chartData.map((entry) => entry.tdr ?? 0),
                borderColor: "rgba(255, 99, 132, 1)",
                backgroundColor: "rgba(255, 99, 132, 0.2)",
                tension: 0.1,
              },
            ],
          },
          options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
              x: {
                type: "time",
                time: { unit: "minute", tooltipFormat: "dd.MM.yyyy HH:mm" },
                title: { display: true, text: "Zeit" },
              },
              y: {
                title: { display: true, text: "km" },
                min: 0,
                max: 3,
              },
            },
          },
        });
      }
    }
  }, [chartData]);

  return (
    <div>
      <canvas ref={chartRef} style={{ width: "100%", height: "20rem" }} />
    </div>
  );
};

export default TDRChart;