import React from "react";
import { Line } from "react-chartjs-2";
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
  Filler, // Import Filler for area fill
} from "chart.js";

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

const WarehouseThroughput = () => {
  // Line graph data for a year (monthly throughput)
  const lineGraphData = {
    labels: [
      "Jan",
      "Feb",
      "Mar",
      "Apr",
      "May",
      "Jun",
      "Jul",
      "Aug",
      "Sep",
      "Oct",
      "Nov",
      "Dec",
    ], // Months of the year
    datasets: [
      {
        label: "Throughput (units/month)",
        data: [500, 400, 300, 450, 350, 250, 200, 300, 250, 150, 100, 150], // Example monthly data
        borderColor: "#6f42c1", // Use the desired color for the line (purple)
        backgroundColor: "rgba(111, 66, 193, 0.2)", // Use a semi-transparent purple for the fill
        borderWidth: 2, // Line thickness
        fill: true, // Enable fill for this dataset
        pointRadius: 0, // Remove dots at each data point
        tension: 0.5, // Smooth interpolation for the line
      },
    ],
  };

  // Line graph options
  const lineGraphOptions = {
    responsive: true,
    maintainAspectRatio: false, // Allow custom height/width adjustments
    plugins: {
      legend: {
        display: false, // Hide legend
      },
      title: {
        display: false, // No chart title needed
      },
      tooltip: {
        callbacks: {
          label: (context: any) => {
            const value = context.parsed.y;
            return `${value} units`; // Customize tooltip to display "units"
          },
        },
      },
    },
    scales: {
      x: {
        grid: {
          display: false, // Hide x-axis grid lines
        },
        ticks: {
          maxRotation: 0, // Prevent label rotation
          autoSkip: false, // Display all months
          font: {
            size: 8, // Adjust font size for readability
            color: "#ffffff", // Light text color for labels
          },
        },
      },
      y: {
        display: true, // Show y-axis
        grid: {
          drawBorder: false, // Remove border line
          color: "rgba(255, 255, 255, 0.2)", // Light gray color for grid lines
          borderDash: [5, 5], // Dotted line style (array defines dash and gap lengths)
        },
        ticks: {
          font: {
            size: 8, // Adjust font size for readability
            color: "#ffffff", // Light text color for ticks
          },
        },
      },
    },
    elements: {
      line: {
        tension: 0.5, // Smooth interpolation for the line
      },
    },
  };

  const handleDragStart = (event: React.DragEvent<HTMLDivElement>) => {
    const rect = event.currentTarget.getBoundingClientRect(); // Get element position

    const cardData = JSON.stringify({
      header: "Warehouse Throughput", // Static header
      value: "+5", // Example value (you can change if dynamic)
      per: "2025", // Example percentage or date
      icon: "📊", // Placeholder for an icon (if needed)
      className: event.currentTarget.className,
      position: [rect.top, rect.left], // ✅ Store initial position
      lineGraphData, // ✅ Include chart data
      lineGraphOptions, // ✅ Include chart options
    });


    event.dataTransfer.setData("text/plain", cardData);
    // event.dataTransfer.effectAllowed = "move"; // Improve drag effect
  };

  return (
    <div className="warehouseThroughput floating" style={{ minHeight: "160px !important" }} draggable onDragStart={handleDragStart}>
      <div className="header">
        <h2>Warehouse Throughput</h2>
        <p>
          <span>(+5) more</span> in 2025
        </p>
      </div>
      <div className="lineGraph" style={{ height: "100%" }}>
        {/* Line Graph */}
        <Line data={lineGraphData} options={lineGraphOptions} />
      </div>
    </div>
  );
};

export default WarehouseThroughput;