import React, { Component } from "react";
import { View, Text, TouchableOpacity, StyleSheet, ScrollView, Animated } from "react-native";
import { Typography } from "../../../config/typography";
import * as Utils from '../../../utils/DeviceUtils';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {optionenvoieautrewalletScreen, optionDepotUserScreen} from '../../../utils/UtilsFunction'
import { Color } from "../../../config/Color";
import route from '../../../route.json';
import I18n from 'react-native-i18n';
import 'moment/locale/fr'
import 'moment/locale/es-us'
import 'moment/locale/en-au'
import 'moment/locale/en-ca'
import 'moment/locale/en-ie'
import 'moment/locale/en-il'
import 'moment/locale/en-nz'
import 'moment/locale/en-gb'
let slugify = require('slugify');
import {IlinkEmitter} from "../../../utils/events";
import { readUser } from "../../../webservice/AuthApi";


class PaymentCarteVersAutreWallet extends Component {
    static navigatorStyle = {
        navBarBackgroundColor: Color.primaryColor,
        statusBarColor: Color.primaryDarkColor,
        navBarTextColor: '#FFFFFF',
        navBarButtonColor: '#FFFFFF'
    };

    static navigationOptions = () => {      
        return {
            //onGoBack: () => this.refresh(),
            drawerLabel: () => null,
            headerTitle: I18n.t('ENVOIE_ARGENT'),
            headerTintColor: 'white',
            headerStyle: {
                backgroundColor: Color.primaryColor,
                marginTop: 0,
                color: 'white'
            },
            headerTitleStyle: {
                color: "white"
            },
            title: I18n.t('ENVOIE_ARGENT'),
    

        }
    };
    

    constructor(props) {
        super(props);
        this.state = {
            with_linked_card: true,
            scrollHeaderY: 0,
        };

        this.scrollY = new Animated.Value(0);
        this.scrollHeaderY = new Animated.Value(0);
        this.deltaY = new Animated.Value(0);
        this.bgBannerY = new Animated.Value(0);
        IlinkEmitter.on("refreshWallet", this.refresh);

    }
    toggleDrawer = () => {
        this.props.navigation.goBack()
      }
    refresh = () => {
        
        console.debug("blbobloblob... ")

        readUser().then((user) => {
            if (user) {
                if (user !== undefined) {
                    this.props.getWalletDetailActivated(user.id, null);
                }
            }
        });
    }

    render() {
        return (
            <>
{/* transactions */}
<View  style={styles.container}>
                       <Animated.View style={{
                            position: 'absolute',
                            width: "100%",
                            zIndex: 1,
                           // backgroundColor: Color.primaryColor,
                            height: 140 - this.state.scrollHeaderY,
                            top: 40,
                        }}/>

    <ScrollView ref={component => this._scrollView = component}
                style={{
                    paddingHorizontal: 20, position: 'absolute',
                    width: '100%',
                    height: '100%',
                    zIndex: 2
                }}
                scrollEventThrottle={8}
                onScroll={Animated.event([
                        {
                            nativeEvent: {
                                contentOffset: {y: this.scrollY},
                            },
                        },
                    ],
                    {
                        listener: (event) => {
                            this.setState({scrollHeaderY: event.nativeEvent.contentOffset.y});
                        }
                    })}>
        <View style={[styles.checkDefault, {borderBottomColor: Color.borderColor}]}>
            <Text
                style={[Typography.title3, Typography.semibold]}>
                {I18n.t('TRANSACTIONS')}
            </Text>
        </View>
        <View style={styles.container}>
            <Text style={styles.subbigtitle}>Choisisez la carte que vous voulez utiliser. </Text>
            <View style={styles.transactionContainer}>
                <View style={[styles.containerTouch]}>





                    <TouchableOpacity style={styles.contain}
                                    onPress={() => {
                                        this.props.navigation.push(route.carteLier, {
                                            optionSelect: optionenvoieautrewalletScreen,
                                            onGoBack: () => this.refresh(),
                                            
                                            lottie: {
                                                source: require("../../../datas/json/wallet_with_cash.json"),
                                                loop: true
                                            }
                                        })
                                    }}
                                    activeOpacity={0.9}>
                        <Icon name='arrow-bottom-right'
                            color={Color.primaryColor}
                            size={30}
                            style={styles.imageBanner}/>

                        <View style={[styles.content]}>

                            <View style={styles.contentTitle}>
                                <Text style={[Typography.headline, Typography.semibold]}>
                                    {I18n.t('CARD_LINK')}
                                </Text>
                            </View>


                        </View>
                    </TouchableOpacity>
                </View>
                <View style={[styles.containerTouch]}>
                    <TouchableOpacity style={styles.contain}
                                        onPress={() => {
                                            this.props.navigation.push(route.autreCarte, {
                                                optionSelect: optionenvoieautrewalletScreen,
                                                onGoBack: () => this.refresh(),
                                                lottie: {
                                                    source: require("../../../datas/json/wallet_with_cash.json"),
                                                    loop: true
                                                }
                                            })
                                        }}
                                        activeOpacity={0.9}>

                        <Icon name='arrow-top-left'
                                color={Color.primaryColor}
                                size={30}
                                style={styles.imageBanner}/>

                        <View style={[styles.content]}>

                            <View style={styles.contentTitle}>
                                <Text style={[Typography.headline, Typography.semibold]}>
                                    {I18n.t('OTHER_CARD')}
                                </Text>
                            </View>

                        </View>
                    </TouchableOpacity>
                </View>
            </View>      
        </View>
    </ScrollView>
</View>
        </>
    );
                    }
}
// function PaymentCarteVersAutreWallet({navigation}) {

//     const navigation = useNavigation()
//     useEffect(() => {
       
//         IlinkEmitter.on("refreshWallet", refresh);
//         return () => {
//             IlinkEmitter.off("refreshWallet", refresh);
//         };
//     }, []);
  
//     // const handleGoBack = () => {
//     //     console.debug("blbobloblob... ");
//     //     //props.navigation.push('walletOptionSelect'); // Retour à la page précédente
       
//     //        props.navigation.push(route.walletOptionSelect, {
//     //             optionSelect: optionDepotUserScreen,
//     //             lottie: {
//     //                 source: require("../../../datas/json/link_card.json"),
//     //                 loop: true
//     //             },
//     //         })
//     //     }


//     const refresh = () => {
//         console.debug("blbobloblob... ");
//         readUser().then((user) => {
//             if (user) {
//                 if (user !== undefined) {
//                     getWalletDetailActivated(user.id, null);
//                 }
//             }
//         });
//     }
    
//     return (
//         <>
//             {/* transactions */}
//             <View style={styles.container}>
                
//                 <Animated.View
//                     style={{
//                         position: 'absolute',
//                         width: "100%",
//                         zIndex: 1,
//                         // backgroundColor: Color.primaryColor,
//                         height: 140 ,
//                         top: 40,
//                     }}
//                 />
//                 <ScrollView
//                     style={{
//                         paddingHorizontal: 20,
//                         position: 'absolute',
//                         width: '100%',
//                         height: '100%',
//                         zIndex: 2
//                     }}
//                     scrollEventThrottle={8}
                   
//                 >
//                     <View style={[styles.checkDefault, { borderBottomColor: Color.borderColor }]}>
//                         <Text style={[Typography.title3, Typography.semibold]}>
//                             {I18n.t('TRANSACTIONS')}
//                         </Text>
//                         {/* <TouchableOpacity onPress={handleGoBack}>
//                     <Text>frjbrjbvrkjv</Text>
//                 </TouchableOpacity> */}
//                     </View>
//                     <View style={styles.container}>
//                         <Text style={styles.subbigtitle}>Choisissez la carte que vous voulez utiliser. </Text>
//                         <View style={styles.transactionContainer}>
//                             <View style={[styles.containerTouch]}>
//                                 <TouchableOpacity
//                                     style={styles.contain}
//                                     onPress={() => {
//                                         navigation.push(route.carteLier, {
//                                             optionSelect: optionenvoieautrewalletScreen,
//                                             onGoBack: refresh,
//                                             lottie: {
//                                                 source: require("../../../datas/json/wallet_with_cash.json"),
//                                                 loop: true
//                                             }
//                                         })
//                                     }}
//                                     activeOpacity={0.9}
//                                 >
//                                     <Icon name='arrow-bottom-right'
//                                         color={Color.primaryColor}
//                                         size={30}
//                                         style={styles.imageBanner}
//                                     />
//                                     <View style={[styles.content]}>
//                                         <View style={styles.contentTitle}>
//                                             <Text style={[Typography.headline, Typography.semibold]}>
//                                                 {I18n.t('CARD_LINK')}
//                                             </Text>
//                                         </View>
//                                     </View>
//                                 </TouchableOpacity>
//                             </View>
//                             <View style={[styles.containerTouch]}>
//                                 <TouchableOpacity
//                                     style={styles.contain}
//                                     onPress={() => {
//                                         navigation.push(route.autreCarte, {
//                                             optionSelect: optionenvoieautrewalletScreen,
//                                             onGoBack: refresh,
//                                             lottie: {
//                                                 source: require("../../../datas/json/wallet_with_cash.json"),
//                                                 loop: true
//                                             }
//                                         })
//                                     }}
//                                     activeOpacity={0.9}
//                                 >
//                                     <Icon name='arrow-top-left'
//                                         color={Color.primaryColor}
//                                         size={30}
//                                         style={styles.imageBanner}
//                                     />
//                                     <View style={[styles.content]}>
//                                         <View style={styles.contentTitle}>
//                                             <Text style={[Typography.headline, Typography.semibold]}>
//                                                 {I18n.t('OTHER_CARD')}
//                                             </Text>
//                                         </View>
//                                     </View>
//                                 </TouchableOpacity>
//                             </View>
//                         </View>
//                     </View>
//                 </ScrollView>
//             </View>
//         </>
//     );
// }

// PaymentCarteVersAutreWallet.navigationOptions = () => ({
//     headerStyle: {
//         backgroundColor: Color.primaryColor, // Couleur de l'en-tête
//         //marginTop: 20,
//     },
//     headerTintColor: 'white', // Couleur du texte de l'en-tête
//     headerTitleStyle: {
//         color: 'white', // Style du texte du titre
//     },
//     headerBackTitle: 'Retour', // Texte du bouton de retour
//     headerBackTitleStyle: {
//         color: 'white', // Style du texte du bouton de retour
//     },
//     headerTitle: I18n.t('ENVOIE_ARGENT'),
//     headerTintColor: 'white',
//     headerStyle: {
//       backgroundColor: Color.primaryColor,
//       marginTop: 0,
//       color: 'white'
//     },
//     headerTitleStyle: {
//         color: "white"
//       },
//       title: I18n.t('ENVOIE_ARGENT'),

// });


const styles = StyleSheet.create({
    container: {
        backgroundColor: '#eee',
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },


    checkDefault: {
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        borderBottomWidth: 1,
        paddingVertical: 10,
        marginTop: 5
    },
    blockView: {
        paddingVertical: 10,
        borderBottomWidth: 0.5,
    },
    circlePoint: {
        width: 50,
        height: 50,
        borderRadius: 25,
        marginRight: 5,
        alignItems: 'center',
        justifyContent: 'center',
    },
    transactionContainer: {
        flexDirection: 'row',
        flex: 1,
        paddingTop: 10,
        paddingLeft: 10,
        paddingRight: 10,
    },
    containerTouch: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
        marginRight: 1,
        shadowColor: Color.borderColor,
        borderColor: Color.borderColor,
        borderWidth: 0.5,
        shadowOffset: {width: 1.5, height: 1.5},
        shadowOpacity: 1.0,
        elevation: 5,
        borderRadius: 10,
        backgroundColor: Color.cardBackgroundColor
    },

    contain: {
        flexDirection: 'row',
        justifyContent: 'space-between',
    },
    imageBanner: {
        marginTop: 15,
        marginLeft: 5,
        width: Utils.scaleWithPixel(30),
        height: Utils.scaleWithPixel(30)
    },
    content: {
        height: Utils.scaleWithPixel(60),
        paddingHorizontal: 10,
        justifyContent: 'space-between',
        alignItems: 'flex-start',
        flex: 1,
    },
    contentTitle: {
        paddingTop: 5,
    }
});

export default PaymentCarteVersAutreWallet;