import React from 'react';
import { StyleSheet, View } from 'react-native';
import { Text, List, RadioButton } from "react-native-paper";
import { Image } from 'expo-image'; // Import Image from expo-image

let Slideshow = (props) => {
    //console.log(route.params.postid)
    //return <SinglePostComponent postId={route.params.postid} />;
    //console.log('RenderSlideSHow', props)
    const images = props.route.params.images;
    [imageIndex, setImageIndex] = React.useState(props.route.params.startIndex);
    // images.length
    // console.log(imageIndex);
    // console.log(images[imageIndex][1], images.length);
    let touchY = 0;
    let touchX = 0;
    return (
        <View
            style={{ padding: 10, paddingTop: 20, flex: 1, justifyContent: "center" }}
            onTouchStart={e => {
                //console.log(e.nativeEvent)
                touchY = e.nativeEvent.pageY
                touchX = e.nativeEvent.pageX
            }}
            onTouchEnd={e => {
                if ((touchX - e.nativeEvent.pageX > 20) && (images.length - 1 > imageIndex))
                    setImageIndex(imageIndex + 1)
                if ((touchX - e.nativeEvent.pageX < -20) && (imageIndex > 0))
                    setImageIndex(imageIndex - 1)
            }}
        >
            <Text style={styles.countText}>{imageIndex+1}/{images.length}</Text>
            <Image source={{ uri: images[imageIndex][1] }} key={images[imageIndex][1]} style={styles.image} cachePolicy="memory-disk"/>
        </View>
    )
};

const styles = StyleSheet.create({
    image: {
        width: "100%",
        height: "100%",
        resizeMode: "contain",
    },
    countText: {
        position: 'absolute',
        left: '50%',
        bottom: 10
    }
});

export default Slideshow;