import React from 'react'
import classnames from 'classnames'

function formatProgress(dec) {
  return (dec * 100).toPrecision(3) + "%"
}

export default class ProgressBar extends React.Component {

  render() {
    const failed = this.props.value < 0;
    const inProgress = this.props.value < 1 && this.props.value >= 0;
    const classes = classnames('progress-bar', {
      'progress-bar-failed': failed,
      'progress-bar-in-progress': inProgress,
      'progress-bar-small': this.props.small
    })

    const formatted = formatProgress(this.props.value)

    return <div className={classes}>
      {failed
        ? <div className="progress-bar-text">Failed</div>
        : inProgress ? <div
          className="progress-bar-inner"
          style={{width: formatted}}>
          <div className="progress-bar-text">
            {formatted}
          </div>
        </div>
        : <div className="progress-bar-text">Delivered</div>}
      </div>
  }
}

ProgressBar.propTypes = {
  value: React.PropTypes.number.isRequired,
  small: React.PropTypes.bool
}

ProgressBar.defaultProps = {
  small: false
}