import React from 'react'
import toClassName from 'classnames'
import { StarList } from './StarList'
import { classes } from './fixture'
import { StarListWrap, TotalRatings, StarAndNumberWrap } from './elements'
import { RatingsProps } from './typings'

// would  not count (0) and we already are passing in  false
// formatCount: total => (total === false ? '' : `(${total})`),
export const renderCount = (props: RatingsProps, total: number | boolean) => {
  return total === false ? '(0)' : `(${total})`
}

// emptyRatings
export const renderEmpty = (props: RatingsProps) => {
  return <StarList {...props} value={0} />
}

export const renderWrap = (props: RatingsProps) => {
  const { value, qa, children, className } = props
  const attributes = {
    'data-qa': qa,
    'data-rating-value': value,
    'className': toClassName(classes.ratings, className),
  }

  // @todo shouldn't this be RatingsWrap?
  return <StarAndNumberWrap {...attributes}>{children}</StarAndNumberWrap>
}

export const renderStarList = (props: RatingsProps) => {
  return (
    <StarListWrap key="star">
      {' '}
      <StarList {...props} />{' '}
    </StarListWrap>
  )
}

export const renderTotal = (
  props: RatingsProps,
  formattedCount: string | number
) => {
  return <TotalRatings children={formattedCount} key="total" />
}