import React, { useState } from 'react'
import { Line } from 'react-chartjs-2'
import axios from 'axios';

const WarehouseThroughputComponent = ({
    object
}: any) => {

    const [measurements, setmeasurements] = useState<any>({});
    const [duration, setDuration] = useState("1h")

    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 fetchSavedInputes = async() => {
    
    //     if (object.id !== "") {
    //       try {
    //         const response = await axios.get(`http://${process.env.REACT_APP_SERVER_REST_API_LOCAL_BASE_URL}/api/v2/WidgetData/${id}/${organization}`);
    //         if (response.status === 200) {
    //           setmeasurements(response.data.Data.measurements)
    //           setDuration(response.data.Data.duration)
    //           setName(response.data.widgetName)
    //         } else {
    //           console.log("Unexpected response:", response);
    //         }
    //       } catch (error) {
    //         console.error("There was an error!", error);
    //       }
    //     }
    //   }

      
    return (
        <>
            <div className="header">
                <h2>Warehouse Throughput</h2>
                <p>
                    <span>(+5) more</span> in 2025
                </p>
            </div>
            <div className="lineGraph" style={{ height: "100%" }}>
                <Line data={lineGraphData} options={lineGraphOptions} />
            </div>
        </>
    )
}

export default WarehouseThroughputComponent