import React from 'react'
import { ProgressBarProps } from './typings'
import {
  renderFillBar as defaultRenderFillBar,
  renderWrapper as defaultRenderWrapper,
} from './renderProps'

class ProgressBar extends React.PureComponent<ProgressBarProps> {
  static defaultProps = {
    className: '',
    barWidth: 200,
    currentValue: 0,
    totalValue: 0,
    barColor: 'var(--color-dark-grey)',
    renderFillBar: defaultRenderFillBar,
    renderWrapper: defaultRenderWrapper,
  }

  render() {
    const { renderFillBar, renderWrapper, ...remainingProps } = this.props
    const fillBar = renderFillBar(remainingProps)
    const children = <React.Fragment>{fillBar}</React.Fragment>
    const view = renderWrapper({ ...remainingProps, children })
    return view
  }
}

export { ProgressBar }
export default ProgressBar