import React, { useEffect, useRef } from "react";
import { useSelector } from "react-redux";
import { RootState } from "../../../../../../redux/store";
import Chart from "chart.js/auto";
import "chartjs-adapter-moment";

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

  // Mock-Daten für das Beispiel
  const chartData = [
    { t: "13-02-2025 15:00:00", i: 60.0, a: 65.0, g: 70.0 },
    { t: "14-02-2025 14:00:00", i: 65.0, a: 65.0, g: 65.0 },
    { t: "14-02-2025 13:00:00", i: 65.0, a: 65.0, g: 65.0 },
    { t: "15-02-2025 12:00:00", i: 65.0, a: 65.0, g: 65.0 },
    { t: "15-02-2025 11:00:00", i: 65.0, a: 65.0, g: 65.0 },
    { t: "16-02-2025 10:00:00", i: 65.0, a: 65.0, g: 65.0 },
    { t: "17-02-2025 09:00:00", i: 65.0, a: 65.0, g: 65.0 },
  ];

  useEffect(() => {
    if (chartRef.current) {
      if (chartInstance.current) {
        chartInstance.current.destroy();
      }

      // Datenvorbereitung: Konvertieren der Zeitstempel in Millisekunden
      const processedData = chartData.map((entry) => ({
        ...entry,
        timestampMs: new Date(
          entry.t.replace(/(\d{2})-(\d{2})-(\d{4})/, "$2/$1/$3")
        ).getTime(),
      }));

      const ctx = chartRef.current.getContext("2d");
      if (ctx) {
        chartInstance.current = new Chart(ctx, {
          type: "line",
          data: {
            datasets: [
              {
                label: "Messwert i (kOhm)",
                data: processedData.map((entry) => ({
                  x: entry.timestampMs,
                  y: entry.i,
                })),
                borderColor: "rgba(75, 192, 192, 1)",
                backgroundColor: "rgba(75, 192, 192, 0.2)",
                fill: true,
              },
              {
                label: "Messwert a (kOhm)",
                data: processedData.map((entry) => ({
                  x: entry.timestampMs,
                  y: entry.a,
                })),
                borderColor: "rgba(192, 75, 75, 1)",
                backgroundColor: "rgba(192, 75, 75, 0.2)",
                fill: true,
              },
              {
                label: "Messwert g (kOhm)",
                data: processedData.map((entry) => ({
                  x: entry.timestampMs,
                  y: entry.g,
                })),
                borderColor: "rgba(75, 75, 192, 1)",
                backgroundColor: "rgba(75, 75, 192, 0.2)",
                fill: true,
              },
            ],
          },
          options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
              x: {
                type: "time",
                time: {
                  unit: "day",
                  tooltipFormat: "dd.MM.yyyy HH:mm",
                  displayFormats: {
                    day: "dd.MM.yyyy",
                  },
                },
                title: {
                  display: true,
                  text: "Zeit",
                },
              },
              y: {
                title: {
                  display: true,
                  text: "kOhm",
                },
                min: 50,
                max: 80,
              },
            },
          },
        });
      }
    }

    return () => {
      if (chartInstance.current) {
        chartInstance.current.destroy();
        chartInstance.current = null;
      }
    };
  }, []);

  return (
    <div style={{ position: "relative", width: "100%", height: "400px" }}>
      <canvas ref={chartRef} />
    </div>
  );
};

export default LoopMeasurementChart;