import React from 'react'
import { RatingProps } from './typings'
import { RatingWrapper, RatingContainer, RatingStarParent, RatingStar, RatingCount } from './styled'
import { StarIcon } from 'atoms/Icons/StarIcon'

const Star = () => <StarIcon />

/* Rating - Default star item */
function defaultStar(props: RatingProps, item: Object) {
  const {defaultColor, width, starGap, fillColor} = props
  return (
    <RatingStar fillColor={defaultColor} width={width} starGap={starGap} stroke={fillColor}>
    {item}
    </RatingStar>
  )
}

/* Rating - Rated star for filling */
function ratedStar(props: RatingProps, item: Object) {
  const {fillColor, starRating, width, starGap} = props
  return (
    <RatingStar fillColor={fillColor} value={starRating} ratedStar={true} width={width} starGap={starGap} >
      {item}
    </RatingStar>
  )
}

function renderStarList(starCount: number) {
  const starList = []
  for (let index = 0; index < starCount; index++) {
    starList.push(<Star />)
  }
  return starList
}

/* Rating - starCount value rendering */
function renderCount(props: RatingProps) {
  const {isUserCount, userRating, starRating, countPosition} = props
  const ratingCount = isUserCount ? userRating : starRating
  return (
    <RatingCount position={countPosition} ratedValue={starRating}>
    ({ratingCount})
    </RatingCount>
  )
}

/* Rating - stars rendering */
function renderStars(props: RatingProps) {
  const item = renderStarList(props.starCount)
  const renderRatedStar = props.starRating > 0 ? ratedStar(props, item) : ''

  const renderList = [defaultStar(props, item), renderRatedStar]
  return <RatingStarParent starCount={props.starCount}>{renderList}</RatingStarParent>
}

/* Rating - Container section section */
function renderContainer(props: RatingProps) {
  const { shouldShowCount, countPosition } = props
  const ratingValue = shouldShowCount ? props.renderCount(props) : ''
  return (
    <RatingContainer>
      {props.renderStars(props)}
      {ratingValue}
    </RatingContainer>
  )
}

/* Rating - Wrapper section */
function renderWrapper(props: RatingProps) {
  const {className, children} = props
  const passthroughProps = Object.freeze({
    className,
    'data-qa': props['data-qa']
  })
  return <RatingWrapper {...passthroughProps}>{children}</RatingWrapper>
}

export { Star, defaultStar, ratedStar, renderWrapper, renderContainer, renderStars, renderCount }