import React from 'react';
import { usePluginContext } from '../../../context/PluginContext/usePluginContext';
import ProgressBar from '../../common/ProgressBar/ProgressBar';
import './BulkUpdateProgress.css';

/**
 * Component that displays the progress of bulk plugin updates
 */
export const BulkUpdateProgress: React.FC = () => {
  const { bulkUpdateProgress } = usePluginContext();

  // If no bulk update is in progress, don't render anything
  if (!bulkUpdateProgress) {
    return null;
  }

  const progressPercentage = bulkUpdateProgress.total > 0
    ? Math.round((bulkUpdateProgress.processed / bulkUpdateProgress.total) * 100)
    : 0;

  return (
    <div className="bulk-update-progress">
      <div className="bulk-update-header">
        <h3 className="bulk-update-title">
          Checking for Updates
        </h3>
        <span className="bulk-update-count">
          {bulkUpdateProgress.processed} of {bulkUpdateProgress.total}
        </span>
      </div>

      <ProgressBar
        value={progressPercentage}
        color={progressPercentage === 100 ? 'success' : 'primary'}
        showPercentage={true}
      />

      <div className="bulk-update-details">
        <span className="current-plugin">
          Processing: <strong>{bulkUpdateProgress.current_plugin_name}</strong>
        </span>
      </div>
    </div>
  );
};

export default BulkUpdateProgress;