import React, { useRef, useState, useEffect, useCallback } from 'react';
import { Text, View, Image, StyleSheet, TouchableOpacity, SafeAreaView, Animated, Platform, } from 'react-native';
import Swiper from 'react-native-web-swiper';
const SlideTemplate = props => {
    return (React.createElement(View, { key: props.index, style: [styles.slide, props.isActive ? styles.activeSlide : null] },
        React.createElement(View, { style: styles.location },
            React.createElement(Image, { source: require('../../assets/images/pin.png'), style: styles.locationImage }),
            React.createElement(Text, { style: styles.locationText },
                props.item.location.state,
                ", ",
                props.item.location.countryCode)),
        React.createElement(View, { style: styles.letter },
            React.createElement(Text, { style: styles.bold },
                props.user,
                ","),
            React.createElement(Text, { style: styles.message }, props.item.message),
            React.createElement(Text, { style: styles.cite }, "Sincerely,"),
            React.createElement(Text, { style: styles.bold }, props.item.sender))));
};
export default function ThankYouCardsCarousel({ toggleView, isVisible, user, slideData, }) {
    const slideRef = useRef(null);
    const [opacityAnimation] = useState(new Animated.Value(0));
    const [scaleAnimation] = useState(new Animated.Value(2));
    const [useNativeDriver] = useState(Platform.OS !== 'web');
    const animateIn = useCallback(() => {
        Animated.timing(opacityAnimation, {
            toValue: 1,
            duration: 1000,
            useNativeDriver: useNativeDriver,
        }).start();
        Animated.timing(scaleAnimation, {
            toValue: 1,
            duration: 1000,
            useNativeDriver: useNativeDriver,
        }).start();
    }, [opacityAnimation, scaleAnimation, useNativeDriver]);
    const animateOut = useCallback(() => {
        Animated.timing(opacityAnimation, {
            toValue: 0,
            duration: 1000,
            useNativeDriver: useNativeDriver,
        }).start();
        Animated.timing(scaleAnimation, {
            toValue: 2,
            duration: 1000,
            useNativeDriver: useNativeDriver,
        }).start();
    }, [opacityAnimation, scaleAnimation, useNativeDriver]);
    useEffect(() => {
        if (isVisible) {
            animateIn();
        }
    }, [isVisible, animateIn, animateOut]);
    const animatedStyle = {
        opacity: opacityAnimation,
        transform: [{ scale: scaleAnimation }],
    };
    const handleToggleClick = () => {
        animateOut();
        setTimeout(toggleView, 1000);
    };
    return (React.createElement(SafeAreaView, { style: styles.safeView },
        React.createElement(Animated.View, { style: [styles.safeView, animatedStyle] },
            React.createElement(TouchableOpacity, { onPress: handleToggleClick, style: styles.btnWrap },
                React.createElement(View, { style: styles.btn },
                    React.createElement(Text, { style: styles.btnLabel }, "See All The People Who You've Helped"))),
            React.createElement(Swiper, { ref: slideRef, from: 0, loop: true, minDistanceForAction: 0.1, containerStyle: styles.swiperView, innerContainerStyle: styles.carouselView, controlsEnabled: true, controlsProps: {
                    dotsTouchable: true,
                    nextTitle: '',
                    prevTitle: '',
                    dotActiveStyle: { backgroundColor: 'white' },
                } }, slideData.map((item, index) => {
                return React.createElement(SlideTemplate, { item: item, user: user, key: index });
            })))));
}
const styles = StyleSheet.create({
    safeView: {
        backgroundColor: 'transparent',
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        zIndex: 999,
        height: '100%',
        width: '100%',
        flexDirection: 'column',
        justifyContent: 'flex-start',
        marginHorizontal: 'auto',
        overflow: 'visible',
    },
    swiperView: {
        height: '100%',
        width: '100%',
        maxWidth: 414,
        overflow: 'visible',
        marginHorizontal: 'auto',
        transform: [{ scale: 0.8 }, { translateY: -40 }],
    },
    carouselView: {
        backgroundColor: 'transparent',
        justifyContent: 'space-between',
        overflow: 'visible',
    },
    slide: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        opacity: 0.4,
        transitionProperty: 'all',
        transitionDuration: '0.3s',
        transitionTimingFunction: 'ease-in-out',
    },
    activeSlide: {
        opacity: 1,
    },
    location: {
        height: 40,
        width: 'auto',
        minWidth: 0,
        maxWidth: '80%',
        marginHorizontal: 'auto',
        marginVertical: 20,
        backgroundColor: 'rgba(255,255,255,0.9)',
        borderRadius: 20,
        shadowColor: '#000000',
        shadowRadius: 10,
        shadowOpacity: 0.1,
        shadowOffset: {
            width: 0,
            height: 10,
        },
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        paddingHorizontal: 20,
    },
    locationText: {
        color: '#000000',
        boxSizing: 'border-box',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        fontSize: 18,
    },
    locationImage: {
        boxSizing: 'border-box',
        width: 10,
        height: 15,
        marginRight: 5,
    },
    letter: {
        padding: 30,
        borderRadius: 20,
        boxSizing: 'border-box',
        backgroundColor: 'rgba(255,255,255,0.9)',
        width: 'auto',
        maxWidth: '95%',
        height: 'auto',
        color: '#ffffff',
        marginHorizontal: 'auto',
        marginBottom: 60,
        overflow: 'hidden',
        shadowColor: '#000000',
        shadowRadius: 10,
        shadowOpacity: 0.1,
        shadowOffset: {
            width: 0,
            height: 10,
        },
    },
    bold: {
        fontWeight: 'bold',
        fontSize: 21,
    },
    message: {
        marginTop: 20,
        marginBottom: 20,
        fontSize: 18,
        lineHeight: 28,
    },
    cite: {
        fontSize: 18,
    },
    btnWrap: {
        position: 'relative',
        zIndex: 9999,
        height: 40,
        marginTop: 20,
        minWidth: 0,
        maxWidth: '100%',
        width: 'auto',
        justifyContent: 'center',
        alignItems: 'center',
    },
    btn: {
        width: 'auto',
        marginHorizontal: 40,
        height: 40,
        paddingHorizontal: 20,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#4d94ff',
        borderRadius: 20,
    },
    btnLabel: {
        color: '#fff',
        display: 'flex',
        alignItems: 'center',
    },
});
