import React, { Component } from "react";
import { View, Text, TouchableOpacity, StyleSheet, ScrollView, Image, Animated } from "react-native";
import { Typography } from "../../../config/typography";
import * as Utils from '../../../utils/DeviceUtils';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {optionenvoieautrewalletNanoSanteScreen} 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";

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

    static navigationOptions = () => {
        return {
            drawerLabel: () => null,
            headerTitle: I18n.t('PAIEMENT_FACTURE'),
            headerTintColor: 'white',
            headerStyle: {
                backgroundColor: Color.primaryColor,
                marginTop: 30,
                color: 'white'
            },
            headerTitleStyle: {
                color: "white"
            },
            title: I18n.t('PAIEMENT_FACTURE'),
          

        }
    };

    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
         );

    }
    refresh = () => {
        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}>{I18n.t('CHOUSE_PAYEMENT_MODE')} </Text>
            <View style={styles.transactionContainer}>

                <View style={[styles.containerTouch]}>
                    <TouchableOpacity style={styles.contain}
                                    onPress={() => {
                                        this.props.navigation.push(route.carteLierN, {
                                            
                                            optionSelect: optionenvoieautrewalletNanoSanteScreen,
                                            with_linked_card : true,
                                            onGoBack: () => this.refresh(),
                                            lottie: {
                                                source: require("./../../../datas/json/wallet_with_cash.json"),
                                                loop: true
                                            }
                                        })
                                    }}
                                    activeOpacity={0.9}>
                        <Icon name='link'
                            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.autreCarteN, {
                                                optionSelect: optionenvoieautrewalletNanoSanteScreen,
                                                with_linked_card : false,
                                                onGoBack: () => this.refresh(),
                                                lottie: {
                                                    source: require("./../../../datas/json/wallet_with_cash.json"),
                                                    loop: true
                                                }
                                            })
                                        }}
                                        activeOpacity={0.9}>

                        <Icon name='cash-refund'
                                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 style={styles.transactionContainer}>

                <View style={[styles.containerTouch]}>
                    <TouchableOpacity style={styles.contain}
                                    onPress={() => {
                                        this.props.navigation.push(route.mobileMoneyNanoSante, {
                                            optionSelect: optionenvoieautrewalletNanoSanteScreen,
                                            onGoBack: () => this.refresh(),
                                            lottie: {
                                                source: require("./../../../datas/json/wallet_with_cash.json"),
                                                loop: true
                                            }
                                        })
                                    }}
                                    activeOpacity={0.9}>
                        <Icon name='cash'
                            color={Color.primaryColor}
                            size={30}
                            style={styles.imageBanner}/>

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

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


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

                        <Icon name='wallet'
                                color={Color.primaryColor}
                                size={30}
                                style={styles.imageBanner}/>

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

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

                        </View>
                    </TouchableOpacity>
                </View>

                

            </View>      
        </View>
    </ScrollView>
</View>
        </>
    );
                    }
}

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 PaymentCard;