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(() => {
    console.log('throughputData: ', throughputData > 0);
    if (throughputData > 0) {
      setIsLoading(false);
    } else {
      setIsLoading(true);
    }

  }, [throughputData])

  return (
    <>
      {!isLoading && <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;