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 = {
    meterValue: '0',
    overAllValue: '0',
    numberAlignType: 'prefix',
    displayCount: true,
    renderProgressBar: defaultRenderProgressBar,
    renderCount: defaultRenderCount,
    renderWrapper: defaultRenderWrapper,
  }

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

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

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

export default MeterBar