"use client";

import Chart from "chart.js/auto";
import { DataTDR } from "../redux/types/chartDataTypesTDR";

const chartInstance = { current: null as Chart | null };

/**
 * Erstellt ein TDR-Chart basierend auf den übergebenen Daten.
 */
export const createTDRChart = (dataTDR: DataTDR[]) => {
  const canvas = document.getElementById("myChart") as HTMLCanvasElement;
  if (!canvas) {
    console.error("Canvas mit ID 'myChart' nicht gefunden.");
    return;
  }

  const ctx = canvas.getContext("2d");
  if (!ctx) {
    console.error("2D-Kontext für Canvas konnte nicht erstellt werden.");
    return;
  }

  if (chartInstance.current) {
    chartInstance.current.destroy();
    chartInstance.current = null;
  }

  const minX = Math.min(...dataTDR.map((row) => row.t));
  const maxX = Math.max(...dataTDR.map((row) => row.t));
  const minY = Math.min(...dataTDR.map((row) => row.m));
  const maxY = Math.max(...dataTDR.map((row) => row.m));

  try {
    chartInstance.current = new Chart(ctx, {
      type: "line",
      data: {
        labels: dataTDR.map((row) => row.t),
        datasets: [
          {
            label: "Pegel",
            data: dataTDR.map((row) => row.m),
            borderColor: "#00AEEF",
            borderWidth: 2,
            fill: false,
            tension: 0.1,
          },
        ],
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
          x: {
            type: "linear",
            position: "bottom",
            title: { display: true, text: "Entfernung" },
            min: minX - 5,
            max: maxX + 5,
          },
          y: {
            title: { display: true, text: "Pegel" },
            min: minY - 10,
            max: maxY + 10,
          },
        },
      },
    });
  } catch (error) {
    console.error("Fehler beim Erstellen des TDR-Charts:", error);
  }
};

interface DataLoop {
  t: number;
  m: number;
  n: number;
}

/**
 * Erstellt ein Schleifenmess-Chart basierend auf den übergebenen Daten.
 */
export const createLoopChart = (data: DataLoop[], title: string) => {
  const canvas = document.getElementById("myChart") as HTMLCanvasElement;
  if (!canvas) {
    console.error("Canvas mit ID 'myChart' nicht gefunden.");
    return;
  }

  const ctx = canvas.getContext("2d");
  if (!ctx) {
    console.error("2D-Kontext für Canvas konnte nicht erstellt werden.");
    return;
  }

  const labels = data.map((row) => {
    const date = new Date(String(row.t).replace(/-/g, "/"));
    return date.toLocaleString("de-DE", {
      hour: "2-digit",
      minute: "2-digit",
      second: "2-digit",
    });
  });

  new Chart(ctx, {
    type: "line",
    data: {
      labels,
      datasets: [
        {
          label: "Isolationswiderstand (MOhm)",
          data: data.map((row) => row.m),
          borderColor: "#00AEEF",
          borderWidth: 1,
          tension: 0.1,
          pointRadius: 1,
          pointHoverRadius: 5,
          fill: false,
          yAxisID: "y",
        },
        {
          label: "Schleifenwiderstand (kOhm)",
          data: data.map((row) => row.n),
          borderColor: "black",
          borderWidth: 1,
          tension: 0.1,
          pointRadius: 1,
          pointHoverRadius: 5,
          fill: false,
          yAxisID: "y1",
        },
      ],
    },
    options: {
      scales: {
        x: {
          type: "category",
          title: { display: true, text: "Zeit" },
        },
        y: {
          type: "linear",
          position: "left",
          title: { display: true, text: "MOhm" },
        },
        y1: {
          type: "linear",
          position: "right",
          title: { display: true, text: "kOhm" },
        },
      },
    },
  });
};