import React, { Component } from 'react';
import { StyleSheet, View, Image, StatusBar, Alert, FlatList, TouchableOpacity, ActivityIndicator, Platform, ProgressBarAndroid, Text } 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 { Color } from '../../config/Color';
import { baseUrl } from '../../webservice/IlinkConstants';
import { IlinkEmitter } from "../../utils/events";
import { Provider, Appbar } from 'react-native-paper';
import { readUser } from '../../webservice/AuthApi';
import { FontWeight, Typography } from '../../config/typography';
import LottieView from 'lottie-react-native';
import { isIlinkWorldWallet, optionDepotScreen, optionPaiementFactureSubScreen } from '../../utils/UtilsFunction';
import chunk from 'lodash/chunk';

export default class WalletOptionSelect extends Component {

     constructor(props) {
          super(props);
          IlinkEmitter.on("langueChange", this.updateLangue.bind(this));
          this.state = {
               options: this.props.navigation.state.params.optionSelect.options,
               title: this.props.navigation.state.params.optionSelect.title,
               subTitle: this.props.navigation.state.params.optionSelect.subTitle,
               type: this.props.navigation.state.params.optionSelect.type,
               wallet: this.props.navigation.state.params.wallet,
               lottie: this.props.navigation.state.params.lottie,
               onGoBack: this.props.navigation.state.params.onGoBack,
          }
          console.log("WALLET OPTION PROPS", this.props);

          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()
     }

     redirectToRoute = (options) => {
          switch (this.state.type) {
               case 'FACTURE':
                    this.props.navigation.push(options.screen, {
                         optionSelect: options.subScreenOption,
                         onGoBack: () => this.props.navigation.state.params.onGoBack(),
                    });
                    break;
               case 'DEPOT':
                    this.props.navigation.push(options.screen, {
                         wallet: this.state.wallet,
                         onGoBack: () => this.props.navigation.state.params.onGoBack(),
                    });
                    break;
               case 'DEPOT_USER':
                    this.props.navigation.push(options.screen, {
                         wallet: this.state.wallet,
                         onGoBack: () => this.props.navigation.state.params.onGoBack(),
                         optionSelect: options.subScreenOption,
                    });
                    break;
               case 'RETRAIT':
                    this.props.navigation.push(options.screen, {
                         wallet: this.state.wallet,
                         onGoBack: () => this.props.navigation.state.params.onGoBack(),
                    });
                    break;

               default:
                    this.props.navigation.push(options.screen)
                    break;
          }
     }

     renderItem = (options, isOneElement, index) => (
          isOneElement ?
               <>
                    <View key={index} style={[styles.containerTouch]}>

                         <TouchableOpacity style={styles.contain}
                              onPress={() => {
                                   this.redirectToRoute(options);
                              }}
                              activeOpacity={0.9}>

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

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

                                   <View style={styles.contentTitle}>
                                        <Text style={[Typography.headline, Typography.semibold]}>
                                             {options.title}
                                        </Text>
                                   </View>

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

                    <View style={{ flex: 1 }} />
               </> :
               <View style={[styles.containerTouch]}>

                    <TouchableOpacity style={styles.contain}
                         onPress={() => {
                              this.redirectToRoute(options);
                         }}
                         activeOpacity={0.9}>

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

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

                              <View style={styles.contentTitle}>
                                   <Text style={[Typography.headline, Typography.semibold]}>
                                        {options.title}
                                   </Text>
                              </View>

                              <View style={{ flex: 1 }}>
                              </View>

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

     );

     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={this.state.title}
                                   subtitle={this.state.subTitle}
                              />
                         </Appbar.Header>

                         <View style={styles.container}>

                              <View style={{
                                   justifyContent: 'center',
                                   alignItems: 'center'
                              }}>
                                   <LottieView
                                        style={styles.lottie}
                                        source={this.state.lottie.source}
                                        autoPlay
                                        loop={this.state.lottie.loop}
                                   />
                              </View>

                              <View style={[styles.checkDefault, { borderBottomColor: Color.borderColor }]}>
                                   <Text
                                        style={[Typography.title3, Typography.semibold]}>
                                        {I18n.t('TRANSACTIONS')}
                                   </Text>
                              </View>
                              {
                                   chunk(this.state.options, 2).map((item, index) => (

                                        <View key={index} style={styles.transactionContainer}>
                                             {
                                                  item.length === 1 ?

                                                       item.map((wallet, i) => (
                                                            this.renderItem(wallet, true, i)
                                                       )) :
                                                       item.map((wallet, i) => (
                                                            this.renderItem(wallet, false, i)
                                                       ))
                                             }
                                        </View>
                                   ))
                              }

                         </View>

                    </View>
               </Provider>
          );
     }
}


const styles = StyleSheet.create({
     container: {
          flex: 1,
          backgroundColor: Color.containerBackgroundColor,
          paddingHorizontal: 20,
     },
     item: {
          paddingVertical: 15,
          borderBottomWidth: 1,
          flexDirection: "row",
          justifyContent: "space-between",
          alignItems: "center"
     },
     lottie: {
          width: 540,
          height: 240
     },
     checkDefault: {
          flexDirection: "row",
          justifyContent: "space-between",
          alignItems: "center",
          borderBottomWidth: 1,
          paddingVertical: 10,
          marginTop: 5
     },
     transactionContainer: {
          flexDirection: 'row',
          paddingTop: 10,
     },
     containerTouch: {
          flex: 1,
          flexDirection: 'row',
          alignItems: 'center',
          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: 12,
     }

});