import React, { useMemo } from "react";
import { Line } from "react-chartjs-2";
import {
  Chart as ChartJS,
  LineElement,
  PointElement,
  CategoryScale,
  LinearScale,
  Tooltip,
  Legend,
} from "chart.js";

ChartJS.register(
  LineElement,
  PointElement,
  CategoryScale,
  LinearScale,
  Tooltip,
  Legend
);

const EnergyUsage = ({comparedProducts}:any) => {
  const data = useMemo(() => {
    const randomizeData = () =>
      Array.from({ length: 5 }, () => Math.floor(Math.random() * (2000 - 300 + 1)) + 300);

    return {
      labels: ["Mon", "Tue", "Wed", "Thu", "Fri"],
      datasets: [
        {
          label: "Simulation 1",
          data: randomizeData(),
          borderColor: "#6a0dad",
          fill: false,
          tension: 0.5, // More curved line
          pointRadius: 0, // Remove point indicators
        },
        {
          label: "Simulation 2",
          data: randomizeData(),
          borderColor: "#b19cd9",
          fill: false,
          tension: 0.5,
          pointRadius: 0,
        },
      ],
    };
  }, []);

  const options = useMemo(
    () => ({
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        title: {
          display: true,
        },
        legend: {
          display: false,
        },
      },
      scales: {
        x: {
          display: false, // Hide x-axis
          grid: {
            display: false,
          },
        },
        y: {
          display: false, // Hide y-axis
          grid: {
            display: false,
          },
        },
      },
    }),
    []
  );

  return (
    <div className="comparisionCard energy-usage">
      <div className="energy-usage-wrapper">
        <h4>Energy Usage</h4>
        <p className="value">
          2500 <span>kWh</span>
        </p>
      </div>

      <div className="simulation-details">
        <div className="simulation-wrapper sim-1">
          <div className="icon"></div>
          <div className="simulation-details-wrapper">
            <div className="label">{comparedProducts[0]?.productName}</div>
            <div className="value">98%</div>
          </div>
        </div>
        <div className="simulation-wrapper sim-2">
          <div className="icon"></div>
          <div className="simulation-details-wrapper">
            <div className="label">{comparedProducts[1]?.productName}</div>
            <div className="value">97%</div>
          </div>
        </div>
      </div>

      <div className="chart">
        <Line data={data} options={options} />
      </div>
    </div>
  );
};

export default EnergyUsage;