import React from 'react'
import Empty from 'atoms/Empty'
import { MeterBarProps } from './typings'
import {
  renderWrapper as defaultRenderWrapper,
  renderCount as defaultRenderCount,
  renderProgressBar as defaultRenderProgressBar,
} from './renderProps'

class MeterBar extends React.PureComponent<MeterBarProps> {
  static defaultProps = {
    value: 0,
    min: 0,
    max: 1,
    numberAlignType: 'prefix',
    meterWidth: 200,
    displayCount: true,
    renderProgressBar: defaultRenderProgressBar,
    renderCount: defaultRenderCount,
    renderWrapper: defaultRenderWrapper,
  }

  render() {
    const {
      displayCount,
      renderCount,
      renderProgressBar,
      renderWrapper,
    } = this.props
    const meterBarCount = renderCount(this.props)
    const progressBar = renderProgressBar(this.props)

    const children = (
      <React.Fragment>
        {displayCount ? meterBarCount : Empty}
        {progressBar}
      </React.Fragment>
    )

    const view = renderWrapper({ ...this.props, children })
    return view
  }
}

export { MeterBar }
export default MeterBar