MovieFinder/screens/HomeScreen.tsx

import * as React from 'react';
import {
    Button,
    TouchableOpacity,
    ScrollView,
    View,
    Text,
    StyleSheet,
    Image,
    ImageBackground,
    SafeAreaView,
    ActivityIndicator, FlatList, Animated, Easing
} from 'react-native';
import {RootStackScreenProps} from "../types";
import {useEffect, useRef, useState} from "react";
import {useSafeAreaInsets} from "react-native-safe-area-context";
import {addMovieToWatchLater, getTrendingID, removeMovieTrending,} from "../redux/actions/actionGetTrendingID";
import {useDispatch, useSelector} from 'react-redux';
import Movie from "../model/Movie";

export default function HomeScreen({ navigation }: RootStackScreenProps<'Home'>) {
    // @ts-ignore
    const trendingMovies = useSelector(state => state.appReducer.trendingMovies);

    //console.log("liste [0]: ", trendingMovies[0]);

    const insets = useSafeAreaInsets();

    const styles = StyleSheet.create({
        background: {
            backgroundColor: 'black',
            height: '100%',
            paddingTop: insets.top,
        },

        container:{
            flex: 1,
        },
        filmCard: {
            width: '80%',
            height: '60%',
            justifyContent:'center',
            marginLeft:'auto',
            marginRight:'auto',
            borderRadius: 15,

        },
        image: {
            position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, justifyContent: 'center', alignItems: 'center',
            shadowColor: "#000",
            shadowOffset: {
                width: 0,
                height: 6,
            },
            shadowOpacity: 0.39,
            shadowRadius: 8.30,
            flex: 1,
            paddingTop: 70,
            alignSelf: 'center',
            elevation: 13,
        },
        backgroundImage: {
            flex: 1,
            resizeMode: 'cover', // or 'stretch'
        },
        child: {
            flex: 1,
            backgroundColor: 'rgba(0,0,0,0.5)',
        },

    });


    const dispatch = useDispatch();

    useEffect(() => {
        const loadTrendingID = async () => {
            // @ts-ignore
            await dispatch(getTrendingID());
        };
        //console.log("test1:", trendingMovies);
        loadTrendingID();
    }, [dispatch]);

    type ItemProps = {
        movie : Movie

    }
    function addWatchLater(props: Movie){
       dispatch(addMovieToWatchLater(props));
       dispatch(removeMovieTrending(props));
    }

    function popFirstTrending(props: Movie){
        dispatch(removeMovieTrending(props));
    }

    function formatTime(time: number) {
        console.log(time);
        const hours = Math.floor(time / 60);
        const minutes = time % 60;
        return `${hours}h ${minutes < 10 ? `0${minutes}` : minutes}m`;
    }
    let rotateValueHolder = new Animated.Value(0);

     function startImageRotateFunction(){
        rotateValueHolder.setValue(0);
        Animated.timing(rotateValueHolder, {
            toValue: 0.5,
            duration: 800,
            easing: Easing.linear,
            useNativeDriver: true,
        }).start();}

    const RotateData = rotateValueHolder.interpolate({
        inputRange: [0, 1],
        outputRange: ['0deg', '360deg'],
    });

    return(
        <>
        {trendingMovies.length !== 0 && (
        <SafeAreaView style={styles.background}>
                <ImageBackground blurRadius={8}
                                 style={{
                                     position: 'absolute',
                                     width: "200%",
                                     height: "200%",
                                     justifyContent: "center",
                                     alignItems: "center",
                                     opacity: 0.48
                                 }}
                                 source={{
                                     uri: trendingMovies[0].poster_path,
                                 }}
                ></ImageBackground>
                <View style={styles.image}>
                    <Image
                        style={styles.filmCard}
                        source={{
                            uri: trendingMovies[0].poster_path,
                        }}
                    />
                </View>
                <View style={{height:35, marginTop: 10, marginBottom: 15}}>
                    <ScrollView
                        horizontal={true}
                        showsHorizontalScrollIndicator={false}>
                        <BadgeGenre name={"Popular"} isSelected={false}></BadgeGenre>
                        <BadgeGenre name={"Trending"} isSelected={true}></BadgeGenre>
                        <BadgeGenre name={"Classic"} isSelected={false}></BadgeGenre>
                        <BadgeGenre name={"New"} isSelected={false}></BadgeGenre>
                        <BadgeGenre name={"Cartoon"} isSelected={false}></BadgeGenre>
                        <BadgeGenre name={"Serie"} isSelected={false}></BadgeGenre>
                        <BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
                        <BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>
                        <BadgeGenre name={"cc"} isSelected={false}></BadgeGenre>



                    </ScrollView>
                </View>
                <View style={{ flexDirection: 'column', alignSelf: 'flex-start', alignItems: 'flex-start', paddingHorizontal: 30, flex: 1 }}>

                    <View style={{ flexDirection: 'row', alignSelf: 'flex-start', justifyContent: 'flex-start', width: "100%"}}>
                        <FlatList horizontal
                            data={trendingMovies[0].genres}
                            renderItem={({item}) => <BadgeFilm name={item}></BadgeFilm>}
                        />
                    </View>
                    <View>
                        <Text numberOfLines={1} style={{color: "white", fontSize: 28, fontWeight: "bold", paddingTop: 5}}>{trendingMovies[0].original_title}</Text>
                    </View>
                    <Text style={{color: "lightgray", fontSize: 20, fontWeight: "bold"}}>{trendingMovies[0].release_date}</Text>
                </View>
                <View style={{ flexDirection: 'row' ,alignItems: 'center', justifyContent: "space-evenly", paddingHorizontal: 30, height: '20%', width:'100%'}}>
                    <TouchableOpacity onPress={() => addWatchLater(trendingMovies[0])}>
                        <Image
                            source={require('../assets/images/WatchLater.png')} style={{ resizeMode:"stretch",  height:'45%', aspectRatio: 1,}}
                        />
                    </TouchableOpacity>
                    <TouchableOpacity onPress={
                        () => popFirstTrending(trendingMovies[0]) }>
                        <Animated.Image
                            source={require('../assets/images/Generate.png')} style={{resizeMode:"stretch", height:'45%',aspectRatio: 1,transform: [{ rotate: RotateData }],
                        }}
                        />

                    </TouchableOpacity>
                    <TouchableOpacity>
                        <Image
                            source={require('../assets/images/Favorite.png')} style={{ resizeMode:"stretch", height:'45%', aspectRatio: 1,}}
                        />

                    </TouchableOpacity>
                </View>
            </SafeAreaView>)}
        </>
)
}
type BadgeGenreProps = {
    name : String
    isSelected: Boolean

}

export function BadgeGenre(props: BadgeGenreProps) {
    if(props.isSelected===false){
        return (
            <View style={{paddingHorizontal: 20,  marginHorizontal: 5,height: 35, backgroundColor: '#2E2E2E', borderRadius: 20, justifyContent: "center"}} >
                <Text style={{color: "white"}}>{props.name}</Text>
            </View>

        );
    }
    else{
        return (
            <View style={{paddingHorizontal: 20,  marginHorizontal: 5,height: 35, backgroundColor: '#5C5C5C', borderRadius: 20, borderWidth: 1, borderColor: "white" ,justifyContent: "center"}} >
                <Text style={{color: "white"}}>{props.name}</Text>
            </View>

        );
    }


}

type BadgeFilmProps = {
    name : String

}
export function BadgeFilm(props: BadgeFilmProps) {

        return (
            <View style={{
                paddingHorizontal: 15,
                marginHorizontal: 5,
                height: 30,
                backgroundColor: '#8906B8',
                borderRadius: 15,
                justifyContent: "center",
                alignSelf: "flex-start"
            }}>
                <Text style={{color: "white", fontSize: 12, fontWeight: "bold"}}>{props.name}</Text>
            </View>

        );


}