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';
import MaterialCommunityIcons from 'react-native-vector-icons/dist/MaterialCommunityIcons';
class Rating extends Component {
  constructor(props) {
    super(props);
  }

  renderStar() {
    var whiteStar = 0;
    var yelloStar = 0;
    var whitestarView = [];
    var yellowStarView = [];

    if (this.props.rating >= 5) {
      yelloStar = 5;
    } else {
      whiteStar = 5 - this.props.rating;
      yelloStar = 5 - whiteStar;
    }
    for (var i = 0; i < yelloStar; i++) {
      yellowStarView.push(
        <TouchableOpacity
          style={{marginRight: 3}}
          onPress={() => this.props.onPress && this.props.onPress(i + 1)}>
          <MaterialCommunityIcons name="star" color="yellow" size={20} />
        </TouchableOpacity>,
      );
    }
    for (var i = 0; i < whiteStar; i++) {
      whitestarView.push(
        <TouchableOpacity
          style={{marginRight: 3}}
          onPress={() =>
            this.props.onPress && this.props.onPress(i + this.props.rating + 1)
          }>
          <MaterialCommunityIcons
            name="star-outline"
            color="yellow"
            size={20}
          />
        </TouchableOpacity>,
      );
    }
    return (
      <View style={{flexDirection: 'row', marginTop: 2}}>
        {yellowStarView}
        {whitestarView}
      </View>
    );
  }
  render() {
    return <View>{this.renderStar()}</View>;
  }
}
export default Rating;
