import React from "react";
import { Line } from "react-chartjs-2";
import {
  Chart as ChartJS,
  LineElement,
  CategoryScale,
  LinearScale,
  PointElement,
} from "chart.js";
import { PowerIcon, ThroughputSummaryIcon } from "../../icons/analysis";

ChartJS.register(LineElement, CategoryScale, LinearScale, PointElement);

const ThroughputSummary = () => {
  const data = {
    labels: ["08:00", "08:10", "08:20", "08:30", "08:40", "08:50", "09:00"],
    datasets: [
      {
        label: "Units/hour",
        data: [100, 120, 110, 130, 125, 128, 132],
        borderColor: "#B392F0",
        tension: 0.4,
        pointRadius: 0, // hide points
      },
    ],
  };

  const options = {
    responsive: true,
    scales: {
      x: {
        grid: {
          display: false,
        },
        ticks: {
          display: false,
          color: "#fff",
        },
      },
      y: {
        grid: {
          display: false,
        },
        ticks: {
          display: false,
          color: "#fff",
        },
      },
    },
    plugins: {
      legend: {
        display: false,
      },
      tooltip: {
        enabled: true,
      },
    },
  };

  const shiftUtilization = {
    "shift 1": 25,
    "shift 2": 45,
    "shift 3": 15,
  };

  return (
    <div className="throughoutSummary analysis-card">
      <div className="throughoutSummary-wrapper analysis-card-wrapper">
        <div className="card-header">
          <div className="header">
            <div className="main-header">Throughput Summary</div>
            <div className="sub-header">08:00 - 09:00 AM</div>
          </div>
          <div className="icon-wrapper">
            <ThroughputSummaryIcon />
          </div>
        </div>

        <div className="process-container">
          <div className="throughput-value">
            <span className="value">1240</span> Units/hour
          </div>
          <div className="lineChart">
            <div className="assetUsage">
              <div className="key">Asset usage</div>
              <div className="value">85%</div>
            </div>
            <Line data={data} options={options} />
          </div>
        </div>

        <div className="footer">
          <div className="energyConsumption footer-card">
            <div className="header">Energy Consumption</div>
            <div className="value-container">
              <div className="energy-icon">
                <PowerIcon />
              </div>
              <div className="value-wrapper">
                <div className="value">456</div>
                <div className="unit">KWH</div>
              </div>
            </div>
          </div>
          <div className="shiftUtilization footer-card">
            <div className="header">Shift Utilization</div>
            <div className="value-container">
              <div className="value">85%</div>

              <div className="progress-wrapper">
                <div
                  className="progress shift-1"
                  style={{ width: "30%" }}
                ></div>
                <div
                  className="progress shift-2"
                  style={{ width: "40%" }}
                ></div>
                <div
                  className="progress shift-3"
                  style={{ width: "30%" }}
                ></div>
              </div>
              <div className="progress-indicator">
                <div className="shift-wrapper">
                  <span className="indicator shift-1"></span>
                  <label>Shift 1</label>
                </div>
                <div className="shift-wrapper">
                  <span className="indicator shift-2"></span>
                  <label>Shift 2</label>
                </div>
                <div className="shift-wrapper">
                  <span className="indicator shift-3"></span>
                  <label>Shift 3</label>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default ThroughputSummary;