Dwinzo_dev/app/src/components/ui/analysis/ThroughputSummary.tsx

import { useEffect, useState } from "react";
import { useMachineCount, useMachineUptime, useMaterialCycle, useProductionCapacityData, useThroughPutData } from "../../../store/builder/store";
import {
  ThroughputSummaryIcon,
} from "../../icons/analysis";
import SkeletonUI from "../../templates/SkeletonUI";

const ProductionCapacity = ({
  avgProcessTime = "28.4 Secs/unit",
  machineUtilization = "78%",
  throughputValue = 128,
  timeRange = { startTime: "08:00 AM", endTime: "09:00 AM" },
}) => {



  const { machineActiveTime } = useMachineUptime();
  const { materialCycleTime } = useMaterialCycle();
  const { throughputData } = useThroughPutData()
  const { productionCapacityData } = useProductionCapacityData()

  const progressPercent = machineActiveTime;


  const totalBars = 6;
  const barsToFill = Math.floor((progressPercent / 100) * totalBars);
  const partialFillPercent =
    ((progressPercent / 100) * totalBars - barsToFill) * 100;

  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    if (throughputData >= 0) {
      // console.log('machineActiveTime: ', machineActiveTime);
      // console.log('materialCycleTime: ', materialCycleTime);
      // console.log('throughputData: ', throughputData);
      // console.log('productionCapacityData: ', productionCapacityData);
      setIsLoading(true);
    }

  }, [throughputData])

  return (
    <div className="throughtputSummary-container analysis-card">
      <div className="throughtputSummary-wrapper analysis-card-wrapper">
        <div className="card-header">
          <div className="header">
            <div className="main-header">Throughput Summary</div>
            <div className="sub-header">
              {timeRange.startTime} - {timeRange.endTime}
            </div>
          </div>
          <div className="icon-wrapper">
            <ThroughputSummaryIcon />
          </div>
        </div>
        {isLoading ? (
          <>
            <div className="process-container">
              <div className="throughput-value">
                <span className="value">{throughputData}</span> Units/hour

              </div>

              {/* Dynamic Progress Bar */}
              <div className="progress-bar-wrapper">
                {[...Array(totalBars)].map((_, i) => (
                  <div className="progress-bar" key={i}>
                    {i < barsToFill ? (
                      <div className="bar-fill full" />
                    ) : i === barsToFill ? (
                      <div
                        className="bar-fill partial"
                        style={{ width: `${partialFillPercent}%` }}
                      />
                    ) : null}
                  </div>
                ))}
              </div>
            </div>

            <div className="metrics-section">
              <div className="metric">
                <span className="label">Avg. Process Time</span>
                <span className="value">{materialCycleTime} secs/unit </span>
              </div>
              <div className="metric">
                <span className="label">Machine Utilization</span>
                <span className="value">{machineActiveTime}</span>
                {/* <span className="value">{machineActiveTime}</span> */}
              </div>
            </div>
          </>
        ) : (
          <SkeletonUI type={"default"} />
        )}
      </div>
    </div>
  );
};

export default ProductionCapacity;