import { Html } from "@react-three/drei";
import React from "react";
import { Bar } from "react-chartjs-2";
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend,
  TooltipItem, // Import TooltipItem for typing
} from "chart.js";

// Register ChartJS components
ChartJS.register(
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend
);
interface ProductionCapacityProps {
  position: [number, number, number];
}

const ProductionCapacity : React.FC<ProductionCapacityProps> = ({ position }) => {
  // Chart data for a week
  const chartData = {
    labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], // Days of the week
    datasets: [
      {
        label: "Production Capacity (units/day)",
        data: [1500, 1600, 1400, 1700, 1800, 1900, 2000], // Example daily production data
        backgroundColor: "#6f42c1", // Theme color
        borderColor: "#6f42c1",
        borderWidth: 1,
        borderRadius: 8, // Rounded corners for the bars
        borderSkipped: false, // Ensure all corners are rounded
      },
    ],
  };

  // Chart options
  const chartOptions = {
    responsive: true,
    plugins: {
      legend: {
        display: false, // Hide legend
      },
      title: {
        display: true,
        text: "Weekly Production Capacity",
        font: {
          size: 16,
        },
      },
      tooltip: {
        callbacks: {
          // Explicitly type the context parameter
          label: (context: TooltipItem<"bar">) => {
            const value = context.parsed.y; // Extract the y-axis value
            return `${value} units`; // Customize tooltip to display "units"
          },
        },
      },
    },
    scales: {
      x: {
        grid: {
          display: false, // Hide x-axis grid lines
        },
      },
      y: {
        display: false, // Remove the y-axis completely
      },
    },
  };

  return (
   <Html position={[position[0], position[1], position[2]]}
        scale={[0.5, 0.5, 0.5]}
        transform
        sprite>
      <div className="productionCapacity-wrapper card">
        <div className="headeproductionCapacityr-wrapper">
          <div className="header">Production Capacity</div>
          <div className="production-capacity">
            <div className="value">1,200</div>{" "}
            <div className="value">units/hour</div>
          </div>
          <div className="production-capacity">
            <div className="current">
              <div className="key">Current</div>
              <div className="value">1500</div>
            </div>
            <div className="target">
              <div className="key">Target</div>
              <div className="value">2.345</div>
            </div>
            {/* <div className="value">units/hour</div> */}
          </div>
        </div>{" "}
        <div className="bar-chart charts">
          {/* Bar Chart */}
          <Bar data={chartData} options={chartOptions} />
        </div>
      </div>
    </Html>
  );
};

export default ProductionCapacity;
