import { Html } from "@react-three/drei";
import React from "react";
import { Line } from "react-chartjs-2";
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Tooltip,
  ChartData,
  ChartOptions,
} from "chart.js";
import { WavyIcon } from "../../../icons/3dChartIcons";

// Register Chart.js components
ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Tooltip
);

// Define Props for SmoothLineGraphComponent
interface SmoothLineGraphProps {
  data: ChartData<"line">; // Type for chart data
  options?: ChartOptions<"line">; // Type for chart options (optional)
}

// SmoothLineGraphComponent using react-chartjs-2
const SmoothLineGraphComponent: React.FC<SmoothLineGraphProps> = ({
  data,
  options,
}) => {
  return <Line data={data} options={options} />;
};
interface ReturnOfInvestmentProps {
  position: [number, number, number];
}
const ReturnOfInvestment: React.FC<ReturnOfInvestmentProps> = ({ position }) => {
  // Improved sample data for the smooth curve graph (single day)
  const graphData: ChartData<"line"> = {
    labels: [
      "12 AM",
      "3 AM",
      "6 AM",
      "9 AM",
      "12 PM",
      "3 PM",
      "6 PM",
      "9 PM",
      "12 AM",
    ],
    datasets: [
      {
        label: "Investment",
        data: [100, 250, 400, 400, 500, 600, 700, 800, 900], // Example investment growth
        borderColor: "rgba(75, 192, 192, 1)", // Light blue color
        backgroundColor: "rgba(75, 192, 192, 0.2)",
        fill: true,
        tension: 0.4, // Smooth curve effect
        pointRadius: 0, // Hide dots
        pointHoverRadius: 0, // Hide hover dots
      },
      {
        label: "Return",
        data: [100, 200, 500, 250, 300, 350, 400, 450, 500], // Example return values
        borderColor: "rgba(255, 99, 132, 1)", // Pink color
        backgroundColor: "rgba(255, 99, 132, 0.2)",
        fill: true,
        tension: 0.4, // Smooth curve effect
        pointRadius: 0, // Hide dots
        pointHoverRadius: 0, // Hide hover dots
      },
    ],
  };

  // Options for the smooth curve graph
  const graphOptions: ChartOptions<"line"> = {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      tooltip: {
        enabled: true, // Enable tooltips on hover
        mode: "index", // Show both datasets' values at the same index
        intersect: false, // Allow hovering anywhere on the graph
      },
    },
    scales: {
      x: {
        grid: {
          display: false, // Hide x-axis grid lines
        },
        ticks: {
          display: false, // Hide x-axis labels
        },
      },
      y: {
        grid: {
          display: false, // Hide y-axis grid lines
        },
        ticks: {
          display: false, // Hide y-axis labels
        },
      },
    },
  };

  return (
    <Html position={[position[0], position[1], position[2]]}
      scale={[0.5, 0.5, 0.5]}
      transform
      sprite>
      <div className="returnOfInvestment card">
        <div className="header">Return of Investment</div>
        <div className="lineGraph charts">
          {/* Smooth curve graph with two datasets */}
          <SmoothLineGraphComponent data={graphData} options={graphOptions} />
        </div>
        <div className="returns-wrapper">
          <div className="icon">
            <WavyIcon />
          </div>
          <div className="value">5.78</div>
          <div className="key">Years</div>
        </div>
        <div className="footer">
          in <span>5y</span> with avg <span>7%</span> yearly return
        </div>
      </div>
    </Html>
  );
};

export default ReturnOfInvestment;
