import React, {Component} from 'react';
import {
  View,
  Text,
  TextInput,
  TouchableOpacity,
  Platform,
  Image,
} from 'react-native';
import {colors} from '../assets/styles/colors-theme';
import {width, height} from '../services/screen';
import {images} from '../assets/images/imageIndex';

class Rank extends Component {
  constructor(props) {
    super(props);
  }

  renderStar() {
    var whiteStar = 0;
    var yelloStar = 0;
    var whitestarView = [];
    var yellowStarView = [];
    var ranking = Math.round(this.props.ranking);

    if (ranking >= 5) {
      yelloStar = 5;
    } else {
      whiteStar = 5 - ranking;
      yelloStar = 5 - whiteStar;
    }
    for (var i = 0; i < yelloStar; i++) {
      yellowStarView.push(<Image  style = {{marginRight:1}} source={images.main.yellowStar} />);
    }
    for (var i = 0; i < whiteStar; i++) {
      whitestarView.push(<Image source={images.main.whiteStar} />);
    }
    return (
      <View style={{flexDirection: 'row',marginTop:2}}>
        {yellowStarView}
        {whitestarView}
      </View>
    );
  }
  render() {
    return <View>{this.renderStar()}</View>;
  }
}
export default Rank;
