import React, { Component } from 'react';
import { Animated, Alert, 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 { responsiveHeight, responsiveWidth, } from 'react-native-responsive-dimensions';
import getWalletActivated from '../../webservice/WalletApi';
import getWalletTransactionHistory from '../../webservice/WalletTransactionHistoryApi';
import transferCommissionAction from '../../webservice/WalletTransferCommission';
import Dialog, { DialogContent, DialogTitle, DialogFooter, DialogButton } from 'react-native-popup-dialog';
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 route = require('./../../route.json');
let slugify = require('slugify');
require('../../utils/Translations');

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(),
               isModalConfirmVisible: false,
               wallet: null,
               triggerTransferCommission: false
          };

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

          this.scrollY = new Animated.Value(0);
          this.deltaY = new Animated.Value(0);
          this.bgBannerY = 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));

          if (this.props.navigation.state.params.hasOwnProperty('agentId')) {
               let agentId = this.props.navigation.state.params.agentId;
               this.props.getWalletActivated(agentId);
          }
          else {
               this.props.getWalletTransactionHistory(this.props.navigation.state.params.wallet.id);
               this.state.wallet = this.props.navigation.state.params.wallet;
          }

     }


     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: this.props.navigation.state.params.wallet.network,
               headerStyle: {
                    backgroundColor: Color.primaryColor,
                    paddingTop: 10
               },
               headerTitleStyle: {
                    color: "white"
               }
          }
     };

     componentDidMount() {
          const { result } = this.props;

          if (this.props.navigation.state.params.hasOwnProperty('agentId')) {

               if (result !== null) {
                    const wallet = Array.isArray(result) ? result[0] : result;
                    this.props.getWalletTransactionHistory(wallet.id);
                    this.setState({
                         wallet
                    })
               }
          }
     }

     shouldComponentUpdate(nextProps, nextState) {
          if (this.state.triggerTransferCommission !== nextState.triggerTransferCommission) {
               return false;
          } else {
               return true;
          }
     }


     isEmptyObject = (obj) => {
          for (let prop in obj) {
               if (obj.hasOwnProperty(prop)) {
                    return false;
               }
          }

          return JSON.stringify(obj) === JSON.stringify({});
     }

     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',
          });
     }

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


     refresh = () => {
          const { agentId, wallet } = this.props.navigation.state.params;
          if (typeof agentId !== "undefined") {
               this.props.getWalletActivated(wallet.agentId);
          }
          else
               this.props.getWalletActivated(agentId);
     }

     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}
                              onPress={() => {
                                   this.renderDialogConfirmTransferCommission()
                              }}>
                              {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 = (walletParam) => {

          const wallet = Array.isArray(walletParam) ? walletParam[0] : walletParam;
          return (

               !this.isEmptyObject(wallet) ?
                    (<>
                         {this.state.triggerTransferCommission && this.renderDialogTransferCommissionResponse()}
                         {this.props.loading ?
                              <View
                                   style={{ position: "absolute", zIndex: 1, backgroundColor: "#00000050", width: this.props.loading ? responsiveWidth(100) : 0, height: this.props.loading ? responsiveHeight(100) : 0, flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                                   <Text style={{ fontSize: 20, color: 'white', fontWeight: 'bold' }}>{I18n.t("LOADING_DOTS")}</Text>
                              </View> : null
                         }

                         <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={() => this.props.navigation.push(route.walletDepot, {
                                                                 wallet,
                                                                 onGoBack: () => this.refresh(),
                                                            })}
                                                            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.overline, Color.grayColor], { paddingVertical: 5 }} numberOfLines={5}>
                                                                           {I18n.t('DEPOSIT_DESCRIPTION')}
                                                                      </Text>
                                                                 </View>

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

                                                  <View style={styles.containerTouch}>
                                                       <TouchableOpacity style={styles.contain}
                                                            onPress={() => this.props.navigation.push(route.walletRetrait, {
                                                                 wallet,
                                                                 onGoBack: () => this.refresh(),
                                                            })}
                                                            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.overline, Color.grayColor], { paddingVertical: 5 }} numberOfLines={5}>
                                                                           {I18n.t('WITHDRAWAL_DESCRIPTION')}
                                                                      </Text>
                                                                 </View>

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

                                             {this.renderHistoryTransaction()}
                                        </View>
                                   </View>

                              </ScrollView>
                         </View>
                    </>)
                    :
                    (
                         <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                              <Text style={Typography.body1}>{I18n.t('NO_WALLET_ACTIVED')}</Text>
                         </View>
                    )
          )
     }

     renderHistoryTransactionItem = (item) => {
          let re = moment.tz(item.date, 'Etc/GMT+0').format();
          let date = moment(re).fromNow();

          return (
               <View
                    key={item.id}
                    style={[styles.paymentItem, { borderBottomColor: Color.borderColor }]}>
                    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                         <View style={styles.iconContent}>
                              <Icon name={item.type === 'credit' ? 'arrow-top-left' : 'arrow-bottom-right'}
                                   color={Color.primaryColor} size={20} />
                         </View>
                         <View>
                              {item.type === 'credit' ? (
                                   <Text style={Typography.body1}>{I18n.t('WITHDRAWAL_TRANSACTION_HISTORY_DESCRIPTION')} {item.montant}</Text>
                              ) :
                                   (
                                        <Text style={Typography.body1}>{I18n.t('DEPOSIT_TRANSACTION_HISTORY_DESCRIPTION')} {item.montant}</Text>
                                   )
                              }
                              <Text style={[Typography.footnote, Color.grayColor]} style={{ marginTop: 5 }}>
                                   {date}
                              </Text>
                         </View>
                    </View>
               </View>
          );
     }

     renderHistoryTransactionList = () => {

          const { resultTransaction, errorTransaction } = this.props;
          if (errorTransaction !== null) {
               if (typeof errorTransaction.data !== 'undefined') {
                    return (
                         <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                              <Text style={Typography.body1}>{errorTransaction.data.error}</Text>
                         </View>
                    )
               }
               else {
                    return (
                         <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                              <Text style={Typography.body1}>{errorTransaction}</Text>
                         </View>
                    )
               }
          }
          if (resultTransaction !== null) {
               if (resultTransaction.response !== null) {
                    return (
                         Array.isArray(resultTransaction.response) && (resultTransaction.response.length) > 0 ?
                              (
                                   resultTransaction.response.map((item, ) => (
                                        this.renderHistoryTransactionItem(item)
                                   ))
                              ) :
                              (
                                   <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                                        <Text style={Typography.body1}>{I18n.t('NO_WALLET_HISTORY')}</Text>
                                   </View>
                              )
                    )
               }
          }

     }


     renderHistoryTransaction = () => {

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

                    <ScrollView style={styles.transactionContainer}>
                         {
                              this.props.loadingTransaction ?
                                   (
                                        <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>
                                   ) : this.renderHistoryTransactionList()
                         }
                    </ScrollView>
               </>
          )
     }

     renderDialogConfirmTransferCommission = () => {
          Alert.alert(
               I18n.t("CONFIRM"),
               I18n.t('CONFIRM_TRANSFER_COMMISSION')
               ,
               [
                    {
                         text: I18n.t("NO"), onPress: () => {

                         }
                    },
                    {
                         text: I18n.t("YES"), onPress: () => {
                              this.props.transferCommissionAction(this.state.wallet.id);
                              this.refresh();
                              this.setState({
                                   triggerTransferCommission: !this.state.triggerTransferCommission
                              });
                         }
                    }

               ],
               { cancelable: false }
          )
     }


     renderDialogTransferCommissionResponse = () => {
          const { resultTransferCommission, errorTransferCommission } = this.props;
          if (errorTransferCommission !== null) {
               if (typeof errorTransferCommission.data !== 'undefined') {
                    Alert.alert(
                         I18n.t("ERROR_LABLE"),
                         errorTransferCommission.data.error
                         ,
                         [
                              {
                                   text: I18n.t("OK"), onPress: () => {

                                   }
                              }

                         ],
                         { cancelable: false }
                    )
               }
               else {
                    Alert.alert(
                         I18n.t("ERROR_LABLE"),
                         errorTransferCommission
                         ,
                         [
                              {
                                   text: I18n.t("OK"), onPress: () => {

                                   }
                              }

                         ],
                         { cancelable: false }
                    )
               }
          }

          if (resultTransferCommission !== null) {
               if (resultTransferCommission.response !== null) {
                    Alert.alert(
                         I18n.t("SUCCESS"),
                         resultTransferCommission.response,
                         [
                              {
                                   text: I18n.t("OK"), onPress: () => {

                                   }
                              }

                         ],
                         { cancelable: false }
                    )
               }
          }
     }

     render() {
          console.log('Wallet Detail props', this.props);
          const isHomeRootView = this.props.navigation.state.params.hasOwnProperty('agentId');
          console.log("WALLET PARAMS", this.props.navigation.state.params.wallet);
          return (
               !isHomeRootView ?
                    this.renderDetailWallet(this.props.navigation.state.params.wallet)
                    :
                    ((this.props.loading || this.props.loadingTransferCommission) ?
                         this.renderLoader() :
                         (
                              this.props.result !== null &&
                              this.renderDetailWallet(this.props.result.response)
                         )
                    )
          );
     }
}


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

     loadingTransaction: state.walletHistoryReducer.loadingTransaction,
     resultTransaction: state.walletHistoryReducer.resultTransaction,
     errorTransaction: state.walletHistoryReducer.errorTransaction,

     loadingTransferCommission: state.walletTransferCommissionReducer.loadingTransferCommission,
     resultTransferCommission: state.walletTransferCommissionReducer.resultTransferCommission,
     errorTransferCommission: state.walletTransferCommissionReducer.errorTransferCommission,
});

const mapDispatchToProps = dispatch => bindActionCreators({
     getWalletActivated,
     getWalletTransactionHistory,
     transferCommissionAction
}, 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
     },
     paymentItem: {
          flexDirection: "row",
          alignItems: "center",
          justifyContent: "space-between",
          borderBottomWidth: 1,
          paddingVertical: 5,
          width: responsiveWidth(100),
          marginBottom: 15
     },
     iconContent: {
          width: 60,
          marginRight: 10,
          alignItems: "center"
     },
     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: 10,
          marginTop: 5
     },
     blockView: {
          paddingVertical: 10,
          borderBottomWidth: 0.5,
     },
     circlePoint: {
          width: 50,
          height: 50,
          borderRadius: 25,
          marginRight: 5,
          alignItems: 'center',
          justifyContent: 'center',
     },
     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: 5,
     }
})