import React, { Component } from 'react';
import { StyleSheet, View, Image, StatusBar, ScrollView, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
const route = require('./../../route.json');
let slugify = require('slugify');
import I18n from 'react-native-i18n'
import * as Utils from '../../utils/DeviceUtils';
import { Images } from '../../config/Images';
import CustomText from '../../components/CustomText';
import { Color } from '../../config/Color';
import { SafeAreaView } from 'react-navigation';
import { baseUrl } from '../../webservice/IlinkConstants';
import { IlinkEmitter } from "../../utils/events";
import { Provider, Appbar } from 'react-native-paper';

const card = [
     {
          id: "12",
          name: "Canal +",
          countryId: "78"
     },
     {
          id: "14",
          name: "Airtel Money",
          countryId: "78"
     },
     {
          id: "17",
          name: "SEEG",
          countryId: "78"
     },
     {
          id: "19",
          name: "Juba",
          countryId: "78"
     },
     {
          id: "77",
          name: "Mobicash",
          countryId: "78"
     },
     {
          id: "82",
          name: "Western Union",
          countryId: "78"
     },
     {
          id: "95",
          name: "MoneyGram",
          countryId: "78"
     },
     {
          id: "100",
          name: "Express Union",
          countryId: "78"
     },
     {
          id: "109",
          name: "Money Express",
          countryId: "78"
     },
     {
          id: "118",
          name: "UBA",
          countryId: "78"
     },
     {
          id: "135",
          name: "Small World",
          countryId: "78"
     },
     {
          id: "158",
          name: "Wari",
          countryId: "78"
     },
     {
          id: "171",
          name: "Ria",
          countryId: "78"
     },
     {
          id: "184",
          name: "Sigue",
          countryId: "78"
     },
     {
          id: "197",
          name: "Ecobank",
          countryId: "78"
     },
     {
          id: "209",
          name: "DHL",
          countryId: "78"
     },
     {
          id: "220",
          name: "OraBank",
          countryId: "78"
     },
     {
          id: "223",
          name: "Satcon",
          countryId: "78"
     },
     {
          id: "235",
          name: "FINAM ",
          countryId: "78"
     },
     {
          id: "237",
          name: "UBA fs ilink",
          countryId: "78"
     }
];

export default class WalletSelect extends Component {

     constructor(props) {
          super(props);
          this.state = {
               loading: true
          }
          slugify.extend({ '+': 'plus' });
          IlinkEmitter.on("langueChange", this.updateLangue.bind(this));
     }


     static navigationOptions = ({ navigation }) => ({
          header: null,
          headerMode: 'none',
          headerTitle: null,
          activeColor: '#f0edf6',
          inactiveColor: '#3e2465',
          barStyle: { backgroundColor: '#694fad' },

          drawerLabel: I18n.t('CREDIT_MANAGE'),
          drawerIcon: ({ tintColor }) => (
               <Icon
                    name={'credit-card'}
                    size={24}
               />)
     });

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

     render() {
          return (
               <Provider>
                    <View style={{ flex: 1 }}>

                         <StatusBar
                              backgroundColor={Color.primaryDarkColor}
                              barStyle="light-content"
                              translucent={false}
                         />

                         <Appbar.Header dark={true} style={{ backgroundColor: Color.primaryColor }}>
                              <Appbar.BackAction
                                   onPress={() => { this.props.navigation.pop() }}
                              />
                              <Appbar.Content
                                   title={I18n.t('WALLET')}
                                   subtitle={I18n.t('SELECT_YOUR_WALLET')}
                              />
                         </Appbar.Header>

                         <ScrollView style={{ flex: 1, padding: 20 }}>
                              {
                                   card.map((item, index) => {
                                        let icon = `${baseUrl}/datas/img/network/${slugify(item.name, { lower: true })}-logo.png`;
                                        console.log(icon);
                                        return (
                                             <TouchableOpacity
                                                  key={item.id}
                                                  style={[styles.paymentItem, { borderBottomColor: Color.borderColor }]}
                                                  onPress={() => this.props.navigation.push('walletDetail')}>
                                                  <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                                                       <View style={styles.iconContent}>
                                                            <Image style={{ width: 48, height: 48 }} source={{ uri: icon }} />
                                                       </View>
                                                       <View>
                                                            <CustomText body1>{item.name}</CustomText>
                                                            <CustomText footnote grayColor style={{ marginTop: 5 }}>
                                                                 Pays: Gabon
                                                  </CustomText>
                                                       </View>
                                                  </View>
                                                  {item.primary ? (
                                                       <CustomText footnote primaryColor>
                                                            {I18n.t('PRINCIPAL')}
                                                       </CustomText>
                                                  ) : null}
                                             </TouchableOpacity>
                                        )
                                   })
                              }
                         </ScrollView>
                    </View>
               </Provider>
          );
     }
}

const styles = StyleSheet.create({
     container: {
          flex: 1,
          backgroundColor: Color.containerBackgroundColor,
     },
     paymentItem: {
          flexDirection: "row",
          alignItems: "center",
          justifyContent: "space-between",
          borderBottomWidth: 1,
          paddingVertical: 5,
          width: "100%",
          marginBottom: 15
     },
     iconContent: {
          width: 60,
          marginRight: 10,
          alignItems: "center"
     }
});