import React from 'react';

export interface IProgressBar {
  className?: string;
  color?: string;
  disabled?: boolean;
  label?: string;
  min?: number;
  max?: number;
  now: number;
  style?: React.CSSProperties;
  variant?: 'primary' | 'info' | 'success' | 'warning' | 'danger';
  [x: string]: any;
}

export const ProgressBar: React.FC<IProgressBar> = (props) => {
  const { className = '', label, min = 0, max = 100, now = 0, style, color, variant = 'primary', ...otherProps } = props;

  let nowValue = now;
  if (nowValue <= min) {
    nowValue = min;
  } else if (nowValue >= max) {
    nowValue = max;
  }

  function getStyles(paramNowValue: number, paramColor: string): React.CSSProperties {
    let styles: React.CSSProperties = { width: `${paramNowValue}%` };
    if (paramColor) styles = { ...styles, backgroundColor: paramColor };
    return styles;
  }

  return (
    <div className={`b-progress ${className}`} {...otherProps}>
      <div className={`b-progress-bar ${variant}`} style={getStyles(nowValue, color)}>
        {label && label}
      </div>
    </div>
  );
};