import React from 'react';
import { StyleSheet, TouchableHighlight, Image, TouchableWithoutFeedback, View } from 'react-native';


let Slideshow = (props) => {
    //console.log(route.params.postid)
    //return <SinglePostComponent postId={route.params.postid} />;
    console.log(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);
    return (
        <View
            style={{ padding: 10, paddingTop: 20, flex: 1, justifyContent: "center" }}
            onTouchStart={e => {
                this.touchY = e.nativeEvent.pageY
                this.touchX = e.nativeEvent.pageX
            }}
            onTouchEnd={e => {
                if ((this.touchX - e.nativeEvent.pageX > 20) && (images.length - 1 > imageIndex))
                    setImageIndex(imageIndex + 1)
                if ((this.touchX - e.nativeEvent.pageX < -20) && (imageIndex > 0))
                    setImageIndex(imageIndex - 1)
            }}
        >
            <Image source={{ uri: images[imageIndex][1] }} key={images[imageIndex][1]} style={styles.image} />
        </View>
    )
};

const styles = StyleSheet.create({
    image: {
        width: "100%",
        height: "100%",
        resizeMode: "contain",
    },
});

export default Slideshow;