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

const NumberRating = (Props: Props) => {
  const [currentRating, setCurrentRating] = useState(Props.defaultRating || 0);
  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>
      <View style={[styles.customRatingMainView]}>
        {ratingArray.map((number) => (
          <TouchableOpacity
            activeOpacity={0.7}
            key={number}
            onPress={() => handlePress(number)}
            style={[
              styles.numberViewStyle,
              { backgroundColor: currentRating === number ? "#2C2C2C" : "white" },
            ]}
          >
            <Text
              style={[
                styles.numberTextStyle,
                { color: currentRating === number ? "white" : "#4C4C4C" },
              ]}
            >
              {number}
            </Text>
          </TouchableOpacity>
        ))}
      </View>
      <View style={[styles.descriptionViewStyle]}>
        <Text style={[styles.perfactTextStyle]}>Not likely</Text>
        <Text style={[styles.perfactTextStyle]}>Perfect</Text>
      </View>
    </View>
  );
};

export default NumberRating;