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 { value, numberAlignType } = props
  return (
    <MeterCount orderArrange={getBarCountPosition(numberAlignType)}>
      {value}
    </MeterCount>
  )
}

/**
 * rendering progress bar
 */
function renderProgressBar(props: MeterBarProps) {
  // IMPORTANT: these props need to be actual numbers for this to work!!
  //            this fails if any of these props are strings
  const { value, min, max, meterWidth } = props
  // NOTE: the value needs to adjusted by the min & max limits
  const adjustedValue = value > max ? max : value < min ? min : value - min
  console.log('-- renderProgressBar: ', min, max, value, adjustedValue)
  const meterProps = {
    barWidth: meterWidth,
    currentValue: adjustedValue,
    totalValue: max,
  }
  return <ProgressBar {...meterProps} />
}

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

export { renderCount, renderProgressBar, renderWrapper }