//import React, {Component} from "react"
// import { View, Text, Image, Animated,  TouchableOpacity, StyleSheet } from "react-native"
// let route = require('../../../route.json');

// export default class Modal extends Component {
//     constructor(props) {
//         super(props);
//         this.state = {
          
//         }
//     }
//     render(){
//     return(
     
//         <>
      
//         <View style={styles.container}>
//                 <Text style={styles.text}>Voulez vous utiliser votre carte de rattaché ? ou voulez vous effectuer un retait d'une autre carte? </Text>
//                 <View style={styles.buttons}>
//                     <TouchableOpacity
//                         style={styles.buttons1}
//                         onPress={() => {
//                             this.props.navigation.push(route.retraitCarteVersAutreWalletUser);
//                         } }
//                     >
//                         <Text style={{ color: 'white' }}>utiliser une Autre carte</Text>
//                     </TouchableOpacity>

//                     <TouchableOpacity
//                         style={styles.buttons2}
//                         onPress={() => {
//                             this.props.navigation.push(route.envoieWalletToWalletUser);
//                         } }
//                     >
//                         <Text style={{ color: 'white' }}>utiliser Ma carte lier</Text>
//                     </TouchableOpacity>
//                 </View>
//             </View></>
//     )
//                     } 
//                 }                        
// const styles = StyleSheet.create({
//     container: {
//         flex: 1,
//         justifyContent: 'center',
//         alignItems: 'center',
//       },
//       text: {
//         fontSize: 20,
//         margin: 10,
//         fontWeight: 'bold'
//       },
//       buttons: {
//         flexDirection: 'row',
//           justifyContent: 'space-between',
//           width: '90%',
//           marginTop: 20,
//       },
//       buttons1: {
//         backgroundColor: 'blue',
//         padding: 10,
//         borderRadius: 10,
//       },
//       buttons2: {
//         backgroundColor: 'green',
//         padding: 10,
//         borderRadius: 10,
//       },
// })
import React, { Component } from "react";
import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
import { Typography } from "../../../config/typography";
import { Color } from "../../../config/Color";
import route from '../../../route.json';
import I18n from 'react-native-i18n';

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

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

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

    handleCarteVersAutreWallet = () => {
        this.props.navigation.push(route.autreCarte);
        this.setState((prevState) => ({ with_linked_card: !prevState.with_linked_card }));
    };

    handleWalletToWallet = () => {
        this.props.navigation.push(route.carteLier);
        this.setState((prevState) => ({ with_linked_card: prevState.with_linked_card }));
    }

    render() {
        return (
            <>
                <View style={styles.container}>
                    <Text style={styles.subbigtitle}>Voulez vous utiliser votre carte de rattaché ? ou voulez vous effectuer un retait d'une autre carte? </Text>
                    <View style={styles.buttons}>
                        <TouchableOpacity    

                        style={styles.buttons1}
                        onPress={
                            this.handleCarteVersAutreWallet
                        }
                    >
                            <View style={{paddingTop: 20,}}>
                    <Text style={[Typography.headline, Typography.semibold]}>
                    utiliser une Autre carte
                    </Text>
                </View>
                       
                    </TouchableOpacity>
               
                    <TouchableOpacity
                        style={styles.buttons2}
                        onPress={
                            this.handleWalletToWallet
                        }
                    >
                        <View style={{paddingTop: 20,}}>
                    <Text style={[Typography.headline, Typography.semibold]}>utiliser Ma carte lier</Text>
                      
                        </View>
                    </TouchableOpacity>
                
                </View>
            </View>
        </>
    );
                    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: "#eee",
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
   subbigtitle: {
        color: 'black',
        fontSize: 17,
        textAlign: 'center',
        margin: 5,
    },
    buttons: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        width: '90%',
        marginTop: 20,
    },
    buttons1: {
        backgroundColor: 'white',
        padding: 10,
        borderRadius: 10,
    },
    buttons2: {
        backgroundColor: 'white',
        padding: 10,
        borderRadius: 10,
    },
});

export default Modal;