import * as React from 'react';
import {
Button,
TouchableOpacity,
ScrollView,
View,
Text,
StyleSheet,
Image,
ImageBackground,
SafeAreaView,
ActivityIndicator, FlatList
} from 'react-native';
import {RootStackScreenProps} from "../types";
import {useEffect, useRef, useState} from "react";
import {useSafeAreaInsets} from "react-native-safe-area-context";
import {addMovieToWatchLater, addMovieToFavourite, getTrendingID, removeMovieTrending,} from "../redux/actions/actionGetTrendingID";
import {useDispatch, useSelector} from 'react-redux';
import Movie from "../model/Movie";
import * as url from "url";
import moment from 'moment';
import CardsSwipe from 'react-native-cards-swipe';
import AnimatedLottieView from "lottie-react-native";
export default function HomeScreen({navigation}: RootStackScreenProps<'Home'>) {
// @ts-ignore
const trendingMovies = useSelector(state => state.appReducer.trendingMovies);
const [hours, setHours] = useState(0);
const [minutes, setMinutes] = useState(0);
const [seconds, setSeconds] = useState(0);
const [displayIndex, setdisplayIndex] = useState(0);
var swiper = null;
//console.log("liste [0]: ", trendingMovies[0]);
const insets = useSafeAreaInsets();
const styles = StyleSheet.create({
background1: {
backgroundColor: 'black',
height: '100%',
width: '100%',
paddingTop: insets.top,
},
background2: {
height: '100%',
width: '100%',
paddingTop: insets.top,
},
container: {
flex: 1,
},
filmCard: {
width: '85%',
justifyContent: 'center',
marginLeft: 'auto',
marginRight: 'auto',
borderRadius: 22,
flex: 0.80,
alignItems: 'center',
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 6,
},
shadowOpacity: 0.39,
shadowRadius: 8.30,
alignSelf: 'center',
elevation: 13,
zIndex: 15
},
backgroundImage: {
flex: 1,
resizeMode: 'cover', // or 'stretch'
},
child: {
flex: 1,
backgroundColor: 'rgba(0,0,0,0.5)',
},
circle: {
width: 6,
height: 6,
borderRadius: 100 / 2,
marginTop: 4,
backgroundColor: "lightgray",
marginHorizontal: 8
},
});
const dispatch = useDispatch();
useEffect(() => {
const interval = setInterval(() => {
const today = moment();
today.set({hour: 0, minute: 0, second: 0, millisecond: 0});
const tonight = today.add(1, 'days');
const timestamp = tonight.valueOf();
const now = new Date();
const difference = timestamp - now.getTime();
const h = Math.floor(
(difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
);
setHours(h);
const m = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
setMinutes(m);
const s = Math.floor((difference % (1000 * 60)) / 1000);
setSeconds(s);
//console.log("timer", h, m, s);
});
setTimeout(() => interval, 10000);
}, []);
type ItemProps = {
movie: Movie
}
function addWatchLater(props: Movie) {
dispatch(addMovieToWatchLater(props));
dispatch(removeMovieTrending(props));
if (displayIndex == trendingMovies.length - 1) {
setdisplayIndex(0);
swiper.swipeLeft();
}
}
function addFavourite(props: Movie) {
dispatch(addMovieToFavourite(props));
dispatch(removeMovieTrending(props));
if (displayIndex == trendingMovies.length - 1) {
setdisplayIndex(0);
swiper.swipeLeft();
}
}
function popFirstTrending(props: Movie) {
dispatch(removeMovieTrending(props));
if (displayIndex == trendingMovies.length - 1) {
setdisplayIndex(0);
swiper.swipeLeft();
}
}
function formatTime(time: number) {
const hours = Math.floor(time / 60);
const minutes = time % 60;
return `${hours}h ${minutes < 10 ? `0${minutes}` : minutes}m`;
}
return (
<>
{trendingMovies.length !== 0 && (
{trendingMovies[displayIndex].original_title}
{`${trendingMovies[displayIndex].release_date}`}
{`${trendingMovies[displayIndex].genres[0]} ${trendingMovies[displayIndex].genres[1] !== undefined ? ", " + trendingMovies[0].genres[1] : ""}`}
{`${formatTime(trendingMovies[displayIndex].runtime)}`}
{
swiper = rf
}}
containerStyle={{zIndex: 20}}
cards={trendingMovies}
loop={true}
onSwipedLeft={(index) => {
console.log(index)
if (index < trendingMovies.length - 1) {
setdisplayIndex(index + 1);
} else
setdisplayIndex(0)
}
}
onSwipedRight={(index) => {
if (index < trendingMovies.length)
setdisplayIndex(index + 1)
else
setdisplayIndex(0)
}}
renderCard={(card) =>
(
)
}
/>
{
addWatchLater(trendingMovies[displayIndex]);
}}>
{
popFirstTrending(trendingMovies[displayIndex]);
}}>
{
addFavourite(trendingMovies[displayIndex]);
}
}>
Nouvelle collection dans
{`${hours.toString().padStart(2, '0')}:`}
{`${minutes.toString().padStart(2, '0')}:`}
{`${seconds.toString().padStart(2, '0')}`}
)}
{trendingMovies.length === 0 && (
Félicitations !
Vous avez fini la collection du jour.
{"\n"}Revenez à la fin du décompte pour découvrir de nouvelles propositions.
Nouvelle collection dans
{`${hours.toString().padStart(2, '0')}:`}
{`${minutes.toString().padStart(2, '0')}:`}
{`${seconds.toString().padStart(2, '0')}`}
)
}
)
}
type BadgeGenreProps = {
name: String
isSelected: Boolean
}
export function BadgeGenre(props: BadgeGenreProps) {
if (props.isSelected === false) {
return (
{props.name}
);
} else {
return (
{props.name}
);
}
}
type BadgeFilmProps = {
name: String
}
export function BadgeFilm(props: BadgeFilmProps) {
return (
{props.name}
);
}
type StarsProps = {
note: number
size: number
}
export function Stars(props: StarsProps) {
let imageSource;
let note = props.note / 2;
if (note < 0.5)
imageSource = require('../assets/images/0.5stars_vote.png');
else if (note < 1)
imageSource = require('../assets/images/1stars_vote.png');
else if (note < 1.5)
imageSource = require('../assets/images/1.5stars_vote.png');
else if (note < 2)
imageSource = require('../assets/images/2stars_vote.png');
else if (note < 2.5)
imageSource = require('../assets/images/2.5stars_vote.png');
else if (note < 3)
imageSource = require('../assets/images/3stars_vote.png');
else if (note < 3.5)
imageSource = require('../assets/images/3.5stars_vote.png');
else if (note < 4)
imageSource = require('../assets/images/4stars_vote.png');
else if (note < 4.5)
imageSource = require('../assets/images/4.5stars_vote.png');
else if (note < 5)
imageSource = require('../assets/images/5stars_vote.png');
return (
);
};