ontime/apps/client/src/common/components/multi-part-progress-bar/MultiPartProgressBar.tsx

import { clamp } from '../../utils/math';

import './MultiPartProgressBar.scss';

interface MultiPartProgressBar {
  now: number;
  complete: number;
  normalColor: string;
  warning: number;
  warningColor: string;
  danger: number;
  dangerColor: string;
  hidden?: boolean;
  className?: string;
}

export default function MultiPartProgressBar(props: MultiPartProgressBar) {
  const { now, complete, normalColor, warning, warningColor, danger, dangerColor, hidden, className = '' } = props;

  const percentComplete = 100 - clamp(100 - (Math.max(now, 0) * 100) / complete, 0, 100);

  const dangerWidth = clamp((danger / complete) * 100, 0, 100);
  const warningWidth = clamp((warning / complete) * 100, 0, 100);

  return (
    <div className={`multiprogress-bar ${hidden ? 'multiprogress-bar--hidden' : ''} ${className}`}>
      <div className='multiprogress-bar__bg-normal' style={{ backgroundColor: normalColor }} />
      <div className='multiprogress-bar__bg-warning' style={{ width: `${warningWidth}%`, backgroundColor: warningColor }} />
      <div className='multiprogress-bar__bg-danger' style={{ width: `${dangerWidth}%`, backgroundColor: dangerColor }} />
      <div className='multiprogress-bar__indicator' style={{ width: `${percentComplete}%` }} />
    </div>
  );
}