import React from 'react'
import { isNumberPrimitive } from 'exotic'
import { classes } from './fixture'
import { StarAndNumberWrap, StyledStarIcon, StarNumber } from './elements'
import { StarProps } from './typings'

let starCount = 0
class Star extends React.PureComponent<StarProps> {
  static defaultProps = {
    value: 1,
    isNumberPrefix: false,
    isNumberSuffix: false,
  }

  /**
   * @description simplify factory
   */
  static from(
    attributes: number | StarProps,
    props: StarProps,
    addingNumber: number
  ) {
    //
    if (isNumberPrimitive(attributes)) {
      starCount += 1
      attributes = {
        value: attributes,
        key: attributes + starCount,
      }
    }

    return Star.renderStar(attributes, props, addingNumber)
  }

  // I think this is more for overall ratings
  // which maybe should be a feature and use renderprops
  //
  // @todo this should be renderStarWrap...
  // probably star should be a stronger component? (folder)
  static renderStar(
    attributes: StarProps,
    props: StarProps,
    addingNumber: number
  ) {
    const { isNumberPrefix, isNumberSuffix } = props
    if (isNumberPrefix && addingNumber) {
      return (
        <StarAndNumberWrap>
          <StarNumber>{addingNumber}</StarNumber>
          <Star {...attributes} />
        </StarAndNumberWrap>
      )
    }
    if (isNumberSuffix && addingNumber) {
      return (
        <StarAndNumberWrap>
          <Star {...attributes} />
          <StarNumber>{addingNumber}</StarNumber>
        </StarAndNumberWrap>
      )
    }
    return <Star {...attributes} />
  }

  render() {
    const { value } = this.props

    // determine class name based on value for styling
    // if (isFloat(value)) {}
    // if (isInt(value)) {}
    const isFull = value > 0
    const isEmpty = value <= 0

    const attributes = {
      isFull,
      isEmpty,
      'data-percent': value,
    }

    return <StyledStarIcon {...attributes} />
  }
}

export { Star }
export default Star