import React, { Component } from 'react';
import { Animated, Platform, StyleSheet, View, Image, StatusBar, ScrollView, Text, ProgressBarAndroid, ActivityIndicator, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import I18n from 'react-native-i18n'
import { TabView, TabBar, SceneMap } from 'react-native-tab-view';
import * as Utils from '../../utils/DeviceUtils';
import Icons from 'react-native-vector-icons/Ionicons'
import { Images } from '../../config/Images';
import CustomButton from '../../components/CustomButton';
import { Color } from '../../config/Color';
import Tag from '../../components/Tag';
import { IlinkEmitter } from "../../utils/events";
import { CreditCardInput } from "react-native-credit-card-input";
import { Typography, FontWeight } from '../../config/typography';
import getWalletActivated from '../../webservice/WalletApi';
import { baseUrl } from '../../webservice/IlinkConstants';
let moment = require('moment-timezone');
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 { connect } from 'react-redux';
import { bindActionCreators } from 'redux';


class WalletRetrait extends Component {

     constructor(props) {
          super(props);
          this.state = {

          };

          IlinkEmitter.on("langueChange", this.updateLangue.bind(this));
     }

     updateLangue() {
          this.props.navigation.setParams({ name: I18n.t('WALLET') })
          this.forceUpdate()
     }

     render() {
          return (
               <ScrollView style={[styles.container, { padding: 20 }]}>

                    <View style={{ flex: 1 }}>
                         <View style={[styles.checkDefault, { borderBottomColor: Color.borderColor }]}>
                              <Text style={Typography.body2}>
                                   {I18n.t('ENTER_YOUR_CARD_ID')}
                              </Text>
                         </View>
                    </View>

                    <View style={{ marginTop: 10 }}>

                         <CreditCardInput />
                    </View>

                    <View style={{ margin: 20 }}>
                         <CustomButton outline onPress={() => { console.log('click') }}>
                              {I18n.t('VALIDATE')}
                         </CustomButton>
                    </View>
               </ScrollView>
          )
     }

}

const mapStateToProps = state => ({
     loading: state.walletReducer.loading,
     result: state.walletReducer.result,
     error: state.walletReducer.error
});

const mapDispatchToProps = dispatch => bindActionCreators({
}, dispatch);

export default connect(mapStateToProps, mapDispatchToProps)(WalletRetrait);

const styles = StyleSheet.create({
     container: {
          flex: 1,
          backgroundColor: Color.containerBackgroundColor
     },
     checkDefault: {
          flexDirection: "row",
          justifyContent: "space-between",
          alignItems: "center",
          borderBottomWidth: 1,
          paddingVertical: 15,
          marginTop: 10
     },
});