import { Animated, Image, View } from "react-native";
import { PlaceInfoEntity } from "../../domain/entities/place_info_entity";
import { useAnimatedSelectedIndex } from "../../hooks/useAnimatedSelectedIndex";

interface AnimatedBackgroundProps {
    imageUri?: string;
    backgroundImageAnimation: Animated.Value;
};

export const AnimatedBackground = ({ imageUri, backgroundImageAnimation }: AnimatedBackgroundProps) => {
  return (
    <Animated.View
      style={{
        position: "absolute",
        width: "100%",
        height: "100%",
        opacity: backgroundImageAnimation.interpolate({
          inputRange: [-300, 0],
          outputRange: [0, 1],
        })
      }}
    >
      <Image
        source={{
          uri: imageUri,
        }}
        style={{
          position: "absolute",
          width: "100%",
          height: "100%",
          resizeMode: "cover",
        }}
        onLayout={() => {
          Animated.timing(backgroundImageAnimation, {
            toValue: 0,
            duration: 500,
            useNativeDriver: true,
          }).start();
        }}
      />
      <View
        style={{
          position: "absolute",
          width: "100%",
          height: "100%",
          backgroundColor: "rgba(0, 0, 0, 0.4)",
        }}
      />
    </Animated.View>
  );
};
