import React, { useEffect } 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";
import { HeaderBackButton } from "react-navigation-stack";
import { color } from "react-native-reanimated";
//import { HeaderBackButton } from 'react-navigation';

// let route = require('./../../../route.json')
// 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: 30,
//                 color: 'white'
//             },
//             headerTitleStyle: {
//                 color: "white"
//             },
//             title: I18n.t('ENVOIE_ARGENT'),
//             headerLeft: (props) => (
//                 <HeaderBackButton
//                   {...props}
//                   onPress={() => {
//                     navigation.push(route.walletOptionSelect, {
//                         optionSelect: optionDepotUserScreen,
//                         lottie: {
//                             source: require("../../../datas/json/link_card.json"),
//                             loop: true
//                         },
//                     })
//                     console.log('screenName');
//                   }}
//                 />
//               ),
           
//             // headerLeft: (props) => (
//             //     <HeaderBackButton
//             //       {...props}
//             //       onPress={() => {
//             //         this.props.navigation.push(route.walletOptionSelect, {
//             //             optionSelect: optionDepotUserScreen,
//             //             lottie: {
//             //                 source: require("../../../datas/json/link_card.json"),
//             //                 loop: true
//             //             },
//             //         })
//             //         console.log("blbobloblob... ");
//             //       }}
                 
//             //     />
//             //   ),
//         }
//     };
    

//     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(props) {

    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={() => {
                                        props.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={() => {
                                        props.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 = ({navigation}) => ({
    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: 30,
      color: 'white'
    },
    headerTitleStyle: {
        color: "white"
      },
      title: I18n.t('ENVOIE_ARGENT'),
    headerLeft: () => (
        <HeaderBackButton
            tintColor="#fff" // Couleur du bouton de retour en blanc
          
            onPress={() => {
                // navigation.push(route.walletOptionSelect, {
                //     optionSelect: optionDepotUserScreen,
                //     lottie: {
                //         source: require("../../../datas/json/link_card.json"),
                //         loop: true
                //     },
                // })
                props.navigation.pop()
                console.debug('jfbfjbfhbfh')
            }}
        />
    ),
});


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;