import React from 'react'
import { RatingProps } from './typings'
import {
  RatingWrapper,
  RatingContainer,
  RatingStarParent,
  RatingStar,
  RatingCount,
} from './styled'
import { MaterialIcon } from '@skava/ui/dist/components/atoms/MaterialIcon'

const Star = () => <MaterialIcon type="star" nowrap={true} />

/* 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, width } = props
  const ratingCount = isUserCount ? userRating : starRating
  return (
    <RatingCount
      position={countPosition}
      ratedValue={starRating}
      lineHeight={width}
    >
      ({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,
}