import React, { FC } from 'react'

import { FeatherIcon } from '../FeatherIcons'
import { ICreateIconProps, ICreateIconResponse, IFeatherRating } from './interfaces'

const FeatherRating: FC<IFeatherRating> = ({
  value = 0,
  icons = {
    complete: { icon: "star", color: '#ffbf00' },
    half: { icon: "star", color: '#ffdf80' },
    empty: { icon: "star", color: '#ffffff' }
  },
  max = 5,
}) => {
  const createIcon = ({ value, icons, max }: ICreateIconProps): ICreateIconResponse[] => {
    let i = +value
  
    const iconsToPrint: ICreateIconResponse[] = []
    const { complete, half, empty } = icons
  
    for (i; i >= 1; i -= 1) {
      iconsToPrint.push({ 
        icon: complete.icon,
        fill: complete.color,
        stroke: complete.color
      })
    }
  
    if (i >= 0.5 && i <= 1) {
      iconsToPrint.push({ 
        icon: half.icon,
        fill: half.color,
        stroke: half.color
      })
    }
  
    while (iconsToPrint.length < max) {
      iconsToPrint.push({ 
        icon: empty.icon,
        fill: empty.color,
        stroke: empty.color
      })
    }
  
    return iconsToPrint
  }

  return <div>
    {createIcon({ value, icons, max }).map((icon, i) =>
      <FeatherIcon key={i} {...icon} />
    )}
  </div>
}

export {
  FeatherRating
}
