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

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

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

// LineGraphComponent using react-chartjs-2
const LineGraphComponent: React.FC<LineGraphProps> = ({ data, options }) => {
  return <Line data={data} options={options} />;
};

interface ThroughputProps {
  position: [number, number, number];
}

const Throughput: React.FC<ThroughputProps> = ({ position }) => {

  // Sample data for the line graph
  const graphData: ChartData<"line"> = {
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
    datasets: [
      {
        label: "Throughput",
        data: [1000, 1200, 1100, 1300, 1250, 1400], // Example throughput values
        borderColor: "rgba(75, 192, 192, 1)",
        backgroundColor: "rgba(75, 192, 192, 0.2)",
        fill: true,
      },
    ],
  };

  // Options for the line graph
  const graphOptions: ChartOptions<"line"> = {
    responsive: true,
    plugins: {
      legend: {
        position: "top",
        display: false,
      },
      title: {
        display: true,
        text: "Throughput Over Time",
      },
    },
    scales: {
      x: {
        grid: {
          display: true, // Show vertical grid lines
        },
        ticks: {
          display: false, // Hide x-axis labels
        },
      },
      y: {
        grid: {
          display: false, // Hide horizontal 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="throughput-wrapper">
        <div className="header">Throughput</div>
        <div className="display-value">
          <div className="left">
            <div className="icon">
              <ThroughputIcon />
            </div>
            <div className="value-container">
              <div className="value-wrapper">
                <div className="value">1,200</div>
                <div className="key"> Units/hr</div>
              </div>
              <div className="total-sales">
                <div className="value">316</div>
                <div className="key">sales</div>
              </div>
            </div>
          </div>
          <div className="right">
            <div className="percent-increase">5.77%</div>
          </div>
        </div>
        <div className="line-graph">
          {/* Line graph using react-chartjs-2 */}
          <LineGraphComponent data={graphData} options={graphOptions} />
        </div>
        <div className="footer">
          You made an extra <span className="value">$1256.13</span> this month
        </div>
      </div>
    </Html>
  );
};

export default Throughput;
