import { useEffect, useRef, useState } from "react";
import { StyleSheet, View, Animated, Text } from "react-native";
import { StarRatingForm } from "./star_rating_form";
import AntDesign from "@expo/vector-icons/AntDesign";
import { FloatingEndActionButton } from "../floating_end_action_button";

interface FullPageRatingProps {
  onClose: () => void;
  onSubmitted: (rating: number) => void;
}

export const FullPageRating = ({ onClose, onSubmitted }: FullPageRatingProps) => {
  const [rating, setRating] = useState(0);
  const opacityRef = useRef(new Animated.Value(0)).current;
  useEffect(() => {
    Animated.timing(opacityRef, {
      toValue: 0.7,
      duration: 300,
      useNativeDriver: false,
    }).start();
  }, []);

  const handleOnClose = (callback: () => void) => {
    Animated.timing(opacityRef, {
      toValue: 0,
      duration: 300,
      useNativeDriver: false,
    }).start(() => {
      callback();
    });
  };

  return (
    <View style={styles.mainContainer}>
      <Animated.View
        style={[styles.opacityContainer, { opacity: opacityRef }]}
      ></Animated.View>
      <Animated.View
        style={[
          styles.ratingContainer,
          {
            width: opacityRef.interpolate({
              inputRange: [0, 0.7],
              outputRange: ["0%", "70%"],
            }),
            opacity: opacityRef.interpolate({
              inputRange: [0.3, 0.7],
              outputRange: [0, 1],
            }),
          },
        ]}
      >
        <Text style={styles.messageText}>
          ¿Te gustó esta actividad? Califícala
        </Text>
        <AntDesign
          name="close"
          style={styles.closeButton}
          size={32}
          color="red"
          onPress={() => handleOnClose(onClose)}
        />
        <StarRatingForm maxRating={5} onRatingChange={(rating: number) => {setRating(rating)}} />
        <FloatingEndActionButton title="Enviar" onPress={() => handleOnClose(() => onSubmitted(rating))} />
      </Animated.View>
    </View>
  );
};

const styles = StyleSheet.create({
  mainContainer: {
    position: "absolute",
    justifyContent: "center",
    alignItems: "center",
    width: "100%",
    height: "100%",
  },
  opacityContainer: {
    width: "100%",
    height: "100%",
    position: "absolute",
    backgroundColor: "rgb(0,0,0)",
  },
  ratingContainer: {
    aspectRatio: "1/1",
    backgroundColor: "white",
    zIndex: 2,
    paddingTop: 30,
    borderRadius: 10,
  },
  closeButton: {
    position: "absolute",
    top: 10,
    right: 10,
    zIndex: 3,
  },
  messageText: {
    fontSize: 18,
    fontWeight: "700",
    textAlign: "center",
    margin: 20,
  },
});
