import React, { useRef } from "react";
import {
  View,
  ImageBackground,
  Animated,
  ViewStyle,
  StyleSheet,
} from "react-native";
import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";

const THREE_SECONDS = 3000;

const styles = StyleSheet.create({
  flex: {
    flex: 1,
  },
});

type Props = {
  backgroundImageSource: { uri: string };
  style: ViewStyle;
};

export function AudioPlayerMobileLayout({
  backgroundImageSource,
  style,
}: Props) {
  const fadeAnimation = useRef(new Animated.Value(0)).current;

  const mainContainerStyles: ViewStyle = platformSelect({
    native: {
      backgroundColor: "transparent",
      overflow: "hidden",
      ...style,
    },
  });

  React.useEffect(() => {
    Animated.timing(fadeAnimation, {
      toValue: 1,
      duration: THREE_SECONDS,
      useNativeDriver: true,
    }).start();
  }, []);

  return (
    <View style={mainContainerStyles} pointerEvents="none">
      <Animated.View
        style={[
          mainContainerStyles,
          {
            opacity: fadeAnimation,
          },
        ]}
      >
        <ImageBackground
          source={backgroundImageSource}
          style={styles.flex}
          resizeMode="cover"
        >
          <View style={mainContainerStyles} />
        </ImageBackground>
      </Animated.View>
    </View>
  );
}