import React from 'react'
import ProgressBar from 'atoms/ProgressBar'
import { getBarCountPosition } from './deps'
import { MeterBarWrap, MeterCount } from './styled'
import { MeterBarProps } from './typings'

/**
 * rendering meter bar count
 */
function renderCount(props: MeterBarProps) {
  const { meterValue, numberAlignType } = props
  return <MeterCount orderArrange={getBarCountPosition(numberAlignType)}>{meterValue}</MeterCount>
}

/**
 * rendering progress bar
 */
function renderProgressBar(props: MeterBarProps) {
  const { meterValue, overAllValue } = props
  return <ProgressBar currentValue={meterValue} totalValue={overAllValue} />
}

/**
 * rendering main wrapper of the meter bar
 */
function renderWrapper(props: MeterBarProps) {
  const { children } = props
  return <MeterBarWrap>{children}</MeterBarWrap>
}

export { renderCount, renderProgressBar, renderWrapper }