import React, { useEffect, useState } from "react";
import { View, TouchableOpacity, Text } from "react-native";
import { Props } from "./CustomRating.types";
import { styles } from "./CustomRating.styles";
import ReactSVG from "../../assets/ReactSVG";

export default function CustomRating(Props: Props) {
  const [currentRating, SetCurrentRating] = useState(Props.defaultRating || 0);
  useEffect(() => {
    SetCurrentRating(Props.defaultRating || 0);
  }, [Props.defaultRating]);
  const ratingArray = Array.from(
    { length: Props.maxRating || 5 },
    (_, index) => index + 1
  );
  const handlePress = (rating: number) => {
    SetCurrentRating(rating);
    if (Props.getCurrentRating) {
      Props.getCurrentRating(rating);
    }
  };
  return (
    <View style={[styles.mainViewStyle, Props.mainViewStyle]}>
      <View style={[styles.customRatingBarStyle]}>
        {ratingArray.map((item, key) => {
          return (
            <TouchableOpacity
              activeOpacity={0.7}
              key={item}
              onPress={() => handlePress(item)}
            >
              <View style={[styles.ImageViewStyle]}>
                {item <= currentRating ? (
                  <ReactSVG.StarFill color={Props.starColor} />
                ) : (
                  <ReactSVG.Star />
                )}
              </View>
            </TouchableOpacity>
          );
        })}
      </View>

      {/* {!Props.titleNotShow && (
        <View style={[styles.textViewStyle, Props.textViewStyle]}>
          <Text style={[styles.ratingTextStyle, Props.ratingTextStyle]}>
            {Props.title ? Props.title : "Click to Rate"}
          </Text>
        </View>
      )} */}
    </View>
  );
}