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

let slugify = require('slugify');
require('../../utils/Translations');

const FirstRoute = () => (
     <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 SecondRoute = () => (
     <ScrollView style={[styles.container, { padding: 20 }]}>

     </ScrollView>
);

class WalletDetail extends Component {

     constructor(props) {
          super(props);
          this.state = {
               index: 0,
               routes: [
                    { key: 'depot', title: I18n.t('DEPOSIT') },
                    { key: 'retrait', title: I18n.t('WITHDRAWAL') }
               ],
               heightHeader: Utils.heightHeader(),
          };

          slugify.extend({ '+': 'plus' });

          this.scrollY = new Animated.Value(0);
          this.deltaY = new Animated.Value(0);

          this.heightImageBanner = Utils.scaleWithPixel(250, 1);
          this.marginTopBanner = this.heightImageBanner - this.state.heightHeader - 40;

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

     }



     static options(passProps) {
          return {
               topBar: {
                    drawBehind: false,
                    visible: true,
                    animate: true,
                    buttonColor: 'white',
                    background: {
                         color: 'white',
                    },
                    rightButtons: []
               },
               backButton: {
                    visible: true,
                    color: "white"
               },
               buttonColor: "white",
               background: {
                    color: Color.primaryDarkColor
               },
               statusBar: {
                    drawBehind: false,
                    visible: true,
               }
          };
     }

     static navigationOptions = ({ navigation }) => {
          return {
               headerTitle: I18n.t('WALLET'),
               headerStyle: {
                    backgroundColor: Color.primaryColor,
                    paddingTop: 10
               },
               headerTitleStyle: {
                    color: "white"
               }
          }
     };

     componentDidMount() {
          if (this.props.navigation.state.params.hasOwnProperty('agentId')) {
               let agentId = this.props.navigation.state.params.agentId;
               this.props.getWalletActivated(agentId);
          }
     }

     getWalletIcon = (wallet) => {
          return `${baseUrl}/datas/img/network/${slugify(wallet.network, { lower: true })}-logo.png`;

     }

     getCreationDateToHumanFormat = (date) => {
          let re = moment.tz(date, 'Etc/GMT+0').format();
          return moment(re).fromNow();
     }
     updateLangue() {
          this.props.navigation.setParams({ name: I18n.t('WALLET') })
          this.forceUpdate()
     }


     handleIndexChange = index => this.setState({ index });

     imageScale = () => {
          return this.scrollY.interpolate({
               inputRange: [0, 100],
               outputRange: [1, 0.5],
               extrapolate: 'clamp',
          });
     }

     imageTranslateY = () => {
          return this.scrollY.interpolate({
               inputRange: [0, 100],
               outputRange: [-5, 50],
               extrapolate: 'clamp',
          });
     }


     renderTabBar = props => (
          <TabBar
               {...props}
               scrollEnabled
               indicatorStyle={[styles.indicator, { backgroundColor: Color.primaryColor }]}
               style={[styles.tabBar, { backgroundColor: Color.containerBackgroundColor }]}
               inactiveColor={Color.dividerColor}
               activeColor={Color.grayColor}
               tabStyle={styles.tab}
               renderLabel={({ route, focused, color }) => (
                    <View style={{
                         flex: 1,
                         width: Utils.getWidthDevice() / 2,
                         alignItems: 'center'
                    }}>
                         <Text style={Typography.headline} style={{ color }}>
                              {
                                   (route.key === 'depot') ?
                                        (<Icon name='arrow-bottom-right'
                                             color={color} size={20} />)
                                        :
                                        (<Icon name='arrow-top-left'
                                             color={color} size={20} />)
                              }
                              {`  ${route.title}`}

                         </Text>

                    </View>
               )}

          />
     );

     renderHeader = (wallet) => (
          <View style={[
               styles.containField,
               {
                    backgroundColor: Color.cardBackgroundColor,
                    zIndex: 11,
                    shadowColor: Color.borderColor,
                    borderColor: Color.borderColor,
               }
          ]}>
               <View style={[styles.contentLeftItem]}>
                    <Text numberOfLines={1} style={[Typography.body1, Typography.semibold]}>{I18n.t('COUNTRY')}</Text>
                    <Text numberOfLines={1} adjustsFontSizeToFit={true} style={Typography.caption1}>{wallet.country}</Text>
               </View>

               <View style={{
                    flex: 1,
                    alignItems: 'center',
                    justifyContent: 'flex-end',
               }}>
                    <Animated.Image
                         source={{ uri: this.getWalletIcon(wallet) }}
                         style={{
                              width: 120,
                              height: 120,
                              borderRadius: 60,
                              position: 'absolute',
                              alignSelf: 'center',
                              backgroundColor: Color.whiteColor,
                              bottom: 70,
                              transform: [{
                                   scale: this.imageScale()
                              },
                              {
                                   translateY: this.imageTranslateY()
                              }]
                         }} />

                    <View style={{
                         marginTop: 1, flex: 1,
                         alignItems: 'center',
                         justifyContent: 'flex-end'
                    }}>
                         <Text style={[Typography.headline, Typography.semibold]} numberOfLines={1}>{wallet.network}</Text>
                         <Tag primary style={styles.tagFollow}>
                              {I18n.t('TRANSFER_TO_PRINCIPAL_ACCOUNT')}
                         </Tag>
                    </View>
               </View>
               <View style={styles.contentLeftItem}>
                    <Text numberOfLines={1} style={[Typography.body1, Typography.semibold]} >{I18n.t('CREATION_DATE')}</Text>
                    <Text numberOfLines={1} adjustsFontSizeToFit={true} style={Typography.caption1}>{this.getCreationDateToHumanFormat(wallet.created_date)}</Text>
               </View>
          </View>
     );

     renderLoader = () => {
          return (
               <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                    {Platform.OS === 'android'
                         ?
                         (
                              <>
                                   <ProgressBarAndroid />
                                   <Text>{I18n.t('LOADING_DOTS')}</Text>

                              </>
                         ) :
                         <>
                              <ActivityIndicator size="large" color={'#ccc'} />
                              <Text>{I18n.t('LOADING_DOTS')}</Text>
                         </>
                    }
               </View>
          )
     }

     renderAccountDetail = (wallet) => (
          <View style={{ flexDirection: 'row', flex: 1, justifyContent: 'space-between' }}>

               <View
                    style={{
                         flexDirection: 'row',
                         alignItems: 'center',
                    }}>
                    <View
                         style={[
                              styles.circlePoint,
                              { backgroundColor: Color.primaryColor },
                         ]}>
                         <Icons name='md-wallet'
                              size={28}
                              color={Color.whiteColor}
                         />
                    </View>
                    <View>
                         <Text style={[Typography.title3, Color.primaryColor], { marginBottom: 3 }}>
                              {I18n.t('PRINCIPAL_ACCOUNT_TITLE')}
                         </Text>
                         <Text style={[Typography.body2]}>{wallet.balance_princ}</Text>
                    </View>
               </View>

               <View
                    style={{
                         flexDirection: 'row',
                         alignItems: 'center',
                    }}>
                    <View
                         style={[
                              styles.circlePoint,
                              { backgroundColor: Color.primaryColor },
                         ]}>
                         <Icons name='md-cash'
                              size={28}
                              color={Color.whiteColor}
                         />
                    </View>
                    <View>
                         <Text style={[Typography.title3, Color.primaryColor], { marginBottom: 3 }}>
                              {I18n.t('COMMISSION_ACCOUNT_TITLE')}
                         </Text>
                         <Text style={Typography.body2}>{wallet.balance_com}</Text>
                    </View>
               </View>

          </View>
     );

     renderDetailWallet = (wallet) => {
          return (
               <View
                    style={styles.container}>

                    <Animated.View style={{
                         position: 'absolute',
                         width: "100%",
                         zIndex: 1,
                         backgroundColor: Color.primaryColor,
                         height: 150
                    }} />

                    <ScrollView style={{
                         paddingHorizontal: 20, position: 'absolute',
                         width: '100%',
                         height: '100%',
                         zIndex: 2
                    }}
                         scrollEventThrottle={8}
                         onScroll={Animated.event([
                              {
                                   nativeEvent: {
                                        contentOffset: { y: this.scrollY },
                                   },
                              },
                         ])}>
                         <View style={{ marginTop: 80, }}>

                              {this.renderHeader(wallet)}

                              <View
                                   style={[styles.blockView, { borderBottomColor: Color.borderColor }]}>

                                   {this.renderAccountDetail(wallet)}

                                   <View style={[styles.checkDefault, { borderBottomColor: Color.borderColor }]}>
                                        <Text
                                             style={[Typography.title3, Typography.semibold]}>
                                             {I18n.t('TRANSACTIONS')}
                                        </Text>
                                   </View>

                                   <View style={styles.transactionContainer}>

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

                                             <TouchableOpacity style={styles.contain}
                                                  onPress={() => console.log('click')}
                                                  activeOpacity={0.9}>

                                                  <Icon name='arrow-bottom-right'
                                                       color={Color.primaryColor}
                                                       size={30}
                                                       style={styles.imageBanner} />

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

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

                                                       <View style={{ flex: 1 }}>
                                                            <Text style={[Typography.body2, Color.grayColor], { paddingVertical: 5 }} numberOfLines={5}>
                                                                 {I18n.t('DEPOSIT_DESCRIPTION')}
                                                            </Text>
                                                       </View>

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

                                        <View style={styles.containerTouch}>
                                             <TouchableOpacity style={styles.contain}
                                                  onPress={() => console.log('click')}
                                                  activeOpacity={0.9}>
                                                  <Icon name='arrow-top-left'
                                                       color={Color.primaryColor}
                                                       size={30}
                                                       style={styles.imageBanner} />

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

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

                                                       <View style={{ flex: 1 }}>
                                                            <Text style={[Typography.body2, Color.grayColor], { paddingVertical: 5 }} numberOfLines={5}>
                                                                 {I18n.t('WITHDRAWAL_DESCRIPTION')}
                                                            </Text>
                                                       </View>

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

                              </View>

                              {/*                           <TabView
                                   lazy
                                   navigationState={{ index, routes }}
                                   renderScene={SceneMap({
                                        'depot': FirstRoute,
                                        'retrait': SecondRoute
                                   })}
                                   onIndexChange={this.handleIndexChange}
                                   renderTabBar={this.renderTabBar}
                              /> */}
                         </View>

                    </ScrollView>
               </View>
          )
     }


     render() {
          const isHomeRootView = this.props.navigation.state.params.hasOwnProperty('agentId');
          //const { wallet } = this.props.navigation.state.params;

          console.log("WALLET DETAILS is From Root", isHomeRootView);
          console.log("WALLET DETAILS PROPS", this.props);
          return (
               !isHomeRootView ?
                    this.renderDetailWallet(this.props.navigation.state.params.wallet)
                    :
                    (this.props.loading ?
                         this.renderLoader() :
                         this.renderDetailWallet(this.props.result.response[0])
                    )
          );
     }
}


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

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

export default connect(mapStateToProps, mapDispatchToProps)(WalletDetail);
const styles = StyleSheet.create({
     container: {
          flex: 1,
          backgroundColor: Color.containerBackgroundColor
     },
     indicator: {
          height: 2
     },
     tab: {
          width: Utils.getWidthDevice() / 2
     },
     tabbar: {
          height: 40
     },
     imgBanner: {
          width: '100%',
          height: 250,
          position: 'absolute',
     },
     containField: {
          padding: 10,
          marginBottom: 20,
          borderWidth: 0.5,
          shadowOffset: { width: 1.5, height: 1.5 },
          shadowOpacity: 1.0,
          elevation: 5,
          flexDirection: "row",
          height: 140,
          borderRadius: 10
     },
     contentLeftItem: {
          flex: 1,
          paddingTop: 40,
          paddingLeft: 10,
          paddingRight: 10,
          alignItems: "center"
     },
     tagFollow: { width: 150, margin: 10 },
     profileItem: {
          flexDirection: "row",
          justifyContent: "space-between",
          alignItems: "center",
          paddingBottom: 20,
          paddingTop: 20
     },
     checkDefault: {
          flexDirection: "row",
          justifyContent: "space-between",
          alignItems: "center",
          borderBottomWidth: 1,
          paddingVertical: 15,
          marginTop: 10
     },
     blockView: {
          paddingVertical: 10,
          borderBottomWidth: 0.5,
     },
     circlePoint: {
          width: 50,
          height: 50,
          borderRadius: 25,
          marginRight: 5,
          alignItems: 'center',
          justifyContent: 'center',
     },
     transactionContainer: {
          flexDirection: 'row',
          paddingTop: 20,
     },
     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(50),
          paddingHorizontal: 10,
          justifyContent: 'space-between',
          alignItems: 'flex-start',
          flex: 1,
     },
     contentTitle: {
          paddingTop: 5,
     }
})