import { styled } from 'styleh-components'
import { LabelElement } from '@skava/ui/dist/components/atoms/Text/Label/styled'

const RatingCount = styled(LabelElement)`
  position: relative;
  line-height: ${props => props.lineHeight}px;

  ${props =>
    props.position === 'prefix' &&
    styled.css`
      order: -1;
      padding-right: 10px;
    `};

  ${props =>
    props.position === 'suffix' &&
    styled.css`
      order: 0;
      padding-left: 10px;
    `};
`

const RatingStar = styled.div`
  position: relative;

  svg {
    margin-right: ${props => props.starGap}px;
    width: ${props => props.width}px;
    path:last-child {
      fill: ${props => props.fillColor};
      stroke: ${props => props.stroke};
    }

    &:last-child {
      margin: 0;
    }
  }

  ${props =>
    props.ratedStar &&
    styled.css`
      position: absolute;
      left: 0;
      top: 0;
      white-space: nowrap;
      z-index: 1;
      overflow: hidden;
      width: ${props.value * (props.starGap + props.width) -
        props.starGap / 2}px;
    `};
`

const RatingStarParent = styled.div`
  position: relative;
  overflow: hidden;
`

const RatingContainer = styled.div`
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
`

const RatingWrapper = styled.section`
  position: relative;
`

export {
  RatingWrapper,
  RatingContainer,
  RatingStarParent,
  RatingStar,
  RatingCount,
}