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

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

  // TDR-Daten aus dem Redux Store selektieren
  const chartData = useSelector((state: any) => state.tdrData.data);

  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: {
            datasets: [
              {
                label: "TDR Entfernung (km)",
                data: chartData,
                borderColor: "rgba(255, 99, 132, 1)",
                backgroundColor: "rgba(255, 99, 132, 0.2)",
                tension: 0.1,
                parsing: {
                  xAxisKey: "t", // Schlüssel für den Zeitstempel
                  yAxisKey: "m", // Schlüssel für den Messwert
                },
              },
            ],
          },
          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;