import isEqual from 'lodash/isEqual';
import LottieView from 'lottie-react-native';
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 'moment/locale/es-us';
import 'moment/locale/fr';
import React, { Component } from 'react';
import { Alert, Dimensions, ScrollView, StatusBar, StyleSheet, Text, View } from 'react-native';
import { CreditCardInput } from "react-native-credit-card-input";
import Dialog from "react-native-dialog";
import I18n from 'react-native-i18n';
import { Dropdown } from 'react-native-material-dropdown';
import { Appbar, Provider } from 'react-native-paper';
import { responsiveHeight, responsiveWidth } from 'react-native-responsive-dimensions';
import { ProgressDialog } from 'react-native-simple-dialogs';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import CustomButton from '../../components/CustomButton';
import OutlineTextInput from '../../components/OutlineTextInput';
import style from '../../components/TextInput/styles';
import { Color } from '../../config/Color';
import { Typography } from '../../config/typography';
import { IlinkEmitter } from "../../utils/events";
import { inputCardSource } from '../../utils/UtilsFunction';
import { depositAction, depositActionReset } from '../../webservice/DepositApi';
import { getWalletCommissionAmount, resetWalletListDetailReducer, walletCommissionAmountReset } from '../../webservice/WalletApi';
//import Dialog, { DialogContent, DialogTitle, DialogFooter, DialogButton } from 'react-native-popup-dialog';
let moment = require('moment-timezone');

const CONTAINER_WIDTH = Dimensions.get("window").width;

class WalletDepot extends Component {


     static navigatorStyle = {
          navBarBackgroundColor: Color.accentLightColor,
          statusBarColor: Color.accentColor,
          navBarTextColor: '#FFFFFF',
          navBarButtonColor: '#FFFFFF',
     };
     static navigationOptions = ({ navigation }) => {
          return {
               header: null,
               headerMode: 'none',
               headerTitle: null,
               activeColor: '#f0edf6',
               inactiveColor: '#3e2465',
          };
     }

     constructor(props) {
          super(props);
          this.state = {
               type: "credit",
               montant: '',
               numeroSerie: '',
               numCarte: 0,
               cvv: 0,
               expiration_date: '',
               creditCardInput: {},
               comptePrincipal: this.props.navigation.state.params.wallet.balance_princ,
               id: this.props.navigation.state.params.wallet.id,
               isModalConfirmVisible: false,
               isDataSubmit: false,
               isSubmitClick: false,
               displayCardError: false,
               inputCardSource: inputCardSource(),
               isDisplaySerialTextInput: true,
               facade: "back"
          };
          this.props.walletCommissionAmountReset();
          this.props.depositActionReset();

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

     componentWillReceiveProps(nextProps) {

          if (nextProps.resultGetCommission != null) {

               if (typeof nextProps.resultGetCommission.response !== 'undefined') {

                    if (!nextProps.loadingGetCommission)
                         this.setState({
                              isModalConfirmVisible: true
                         });
               }
          }
     }

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

     onCreditCardChange = (form) => {
          console.log(form);
          this.setState({
               creditCardInput: form,
               displayCardError: false
          });
     }

     isNormalInteger = (str) => {
          if (/[ `!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]/.test(str))
               return false;
          else
               return true;
     }

     isMontantValid = () => {
          const { montant } = this.state;
          if ((parseInt(isEqual(montant, 0)) || montant < 0))
               return {
                    errorMessage: I18n.t('ENTER_AMOUNT_SUPERIOR_ZEROR'),
                    isValid: false
               };

          else if (!this.isNormalInteger(montant))
               return {
                    errorMessage: I18n.t('ENTER_VALID_AMOUNT'),
                    isValid: false
               };


          else if (montant > parseInt(this.state.comptePrincipal))
               return {
                    errorMessage: I18n.t('AMOUNT_SUPERIOR_TO_PRINCIPAL_ACCOUNT'),
                    isValid: false
               };

          else
               return {
                    errorMessage: '',
                    isValid: true
               };
     }


     isNumeroSerieValid = () => {
          const { numeroSerie } = this.state;
          if ((parseInt(isEqual(numeroSerie, 0)) || numeroSerie < 0))
               return {
                    errorMessage: I18n.t('ENTER_VALID_SERIAL_NUMBER'),
                    isValid: false
               };

          else if (!this.isNormalInteger(numeroSerie)) {
               return {
                    errorMessage: I18n.t('ENTER_VALID_SERIAL_NUMBER'),
                    isValid: false
               };
          }
          else if (numeroSerie.length > 11) {
               return {
                    errorMessage: I18n.t('ENTER_VALID_SERIAL_NUMBER'),
                    isValid: false
               };
          }

          else
               return {
                    errorMessage: '',
                    isValid: true
               };
     }

     isCreditCardValid = () => {
          const { creditCardInput } = this.state;
          const errorMessage = [];

          if (typeof creditCardInput.status !== 'undefined') {

               if (creditCardInput.status.cvc === 'incomplete')
                    errorMessage.push(I18n.t('CVC_CARD_ERROR'));
               if (creditCardInput.status.expiry === 'incomplete')
                    errorMessage.push(I18n.t('EXPIRY_CARD_ERROR'));
               if (creditCardInput.status.number === 'incomplete')
                    errorMessage.push(I18n.t('CARD_NUMBER_ERROR'));
          }
          else
               errorMessage.push(I18n.t('THIS_FIELD_IS_REQUIRED'))

          return errorMessage;
     }

     commissionsLoading = () => {
          return (
               <ProgressDialog
                    visible={this.props.loadingGetCommission}
                    title={I18n.t('LOADING')}
                    message={I18n.t('LOADING_INFO')}
               />
          )
     }

     modalConfirmTransaction = (data) => {
          const commission = data.response.commission;
          const montant_calcule = data.response.montant_calcule;

          console.log("DATA SEND TO CONFIRM DIALOG", data);
          return (

               <Dialog.Container useNativeDriver={true} visible={this.state.isModalConfirmVisible}>

                    <Dialog.Title>{I18n.t('CONFIRM_DEPOSIT')}</Dialog.Title>

                    <View>

                         <View style={[styles.blockView, { borderBottomColor: Color.borderColor }]}>
                              <View style={{ flexDirection: 'row', marginTop: 10 }}>
                                   <View style={{ flex: 1 }}>
                                        <Text style={[style.body2]}>{I18n.t('AMOUNT')}</Text>
                                   </View>
                                   <View style={{ flex: 1, alignItems: 'flex-end' }}>
                                        <Text style={[Typography.caption1, Color.grayColor]}>{this.state.montant}</Text>
                                   </View>
                              </View>
                              <View style={{ flexDirection: 'row', marginTop: 10 }}>
                                   <View style={{ flex: 1 }}>
                                        <Text tyle={[Typography.body2]}>{I18n.t('COMMISSION_FEES')}</Text>
                                   </View>
                                   <View style={{ flex: 1, alignItems: 'flex-end' }}>
                                        <Text style={[Typography.caption1, Color.grayColor]}>{commission}</Text>
                                   </View>
                              </View>
                         </View>
                         <View style={{ paddingVertical: 10 }}>
                              <View style={{ flexDirection: 'row', marginTop: 10 }}>
                                   <View style={{ flex: 1 }}>
                                        <Text tyle={[Typography.body2]}>{I18n.t('TOTAL')}</Text>
                                   </View>
                                   <View style={{ flex: 1, alignItems: 'flex-end' }}>
                                        <Text style={[Typography.caption1, Color.grayColor]}>{montant_calcule}</Text>
                                   </View>
                              </View>
                         </View>
                    </View>

                    <Dialog.Button bold={true} label={I18n.t('CANCEL_LABEL')} onPress={() => {
                         this.setState({
                              isModalConfirmVisible: false
                         });
                    }} />
                    <Dialog.Button bold={true} label={I18n.t('SUBMIT_LABEL')} onPress={() => {
                         this.setState({
                              isModalConfirmVisible: false,
                              isDataSubmit: true
                         });
                         this.props.walletCommissionAmountReset();
                         if (isEqual(this.state.facade, 'front')) {
                              this.props.depositAction({
                                   numCarte: this.state.creditCardInput.values.number.replace(/\s/g, ''),
                                   cvv: this.state.creditCardInput.values.cvc,
                                   expiration_date: this.state.creditCardInput.values.expiry,
                                   type: "credit",
                                   montant: this.state.montant,
                                   id_wallet: this.state.id,
                                   facade: this.state.facade
                              });
                         }
                         else {
                              this.props.depositAction({
                                   numCarte: this.state.numeroSerie,
                                   type: "credit",
                                   montant: this.state.montant,
                                   id_wallet: this.state.id,
                                   facade: this.state.facade
                              });
                         }
                    }} />

               </Dialog.Container>

          );

     }

     onSubmitDeposit = () => {
          const { creditCardInput } = this.state;

          if (isEqual(this.state.facade, 'back')) {
               if (this.isMontantValid().isValid && this.isNumeroSerieValid().isValid && this.state.montant.length > 0) {

                    this.setState({
                         numCarte: this.state.numeroSerie
                    });
                    this.props.getWalletCommissionAmount({
                         type: "credit",
                         montant: this.state.montant,
                         id_wallet: this.state.id
                    });
               }
          } else {
               if (this.isMontantValid().isValid && creditCardInput.valid && this.state.montant.length > 0) {

                    this.setState({
                         numCarte: parseInt((creditCardInput.values.number).replace(/ /g, ' ')),
                         cvv: creditCardInput.values.cvc,
                         expiration_date: creditCardInput.values.expiry,
                    });
                    this.props.getWalletCommissionAmount({
                         type: "credit",
                         montant: this.state.montant,
                         id_wallet: this.state.id
                    });
               }
               else if (!creditCardInput.valid) {
                    this.setState({
                         displayCardError: true
                    })
               }
          }

          this.setState({ isSubmitClick: true });
     }


     renderDialogGetCommissionResponse = () => {

          const { errorGetCommission } = this.props;

          if (errorGetCommission !== null) {
               if (typeof errorGetCommission.data !== 'undefined') {
                    Alert.alert(
                         I18n.t("ERROR_LABLE"),
                         errorGetCommission.data.error,
                         [
                              {
                                   text: I18n.t("OK"), onPress: () => {
                                        //this.props.resetCommissionReducer();
                                   }
                              }
                         ],
                         { cancelable: false }
                    )
               }
          }

     }

     isHasError = () => {
          const { error, result } = this.props;

          if (this.state.isDataSubmit) {

               if (error !== null) {
                    if (typeof error.data !== 'undefined') {
                         Alert.alert(
                              I18n.t("ERROR_LABEL"),
                              error.data.error,
                              [
                                   {
                                        text: I18n.t("OK"), onPress: () => { }
                                   }

                              ],
                              { cancelable: false }
                         );

                         this.props.navigation.state.params.onGoBack();
                         this.props.navigation.pop();

                    }
                    return null;
               }

               else if (result !== null) {

                    setTimeout(() => {
                         this.props.resetWalletListDetailReducer();
                         this.props.navigation.state.params.onGoBack();
                         this.props.navigation.pop();
                    }, 1500);

                    return <View
                         style={{ position: "absolute", zIndex: 1, backgroundColor: "#00000050", width: responsiveWidth(100), height: responsiveHeight(100), flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                         <LottieView
                              style={styles.lottie}
                              source={require("../../datas/json/success.json")}
                              autoPlay
                              loop
                         />

                    </View>

               }

               else
                    return null;
          }
     }

     render() {
          console.log("STATE", this.state);
          const { resultGetCommission } = this.props;
          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('MAKE_DEPOSIT')}
                              />
                         </Appbar.Header>
                         <View style={[styles.container]}>

                              {
                                   (resultGetCommission !== null) &&
                                   (typeof resultGetCommission.response !== 'undefined') &&
                                   this.modalConfirmTransaction(resultGetCommission)
                              }

                              {this.isHasError()}
                              {this.commissionsLoading()}
                              {this.state.isSubmitClick && this.renderDialogGetCommissionResponse()}
                              <ScrollView style={{ padding: 20 }}>

                                   <View style={{ marginTop: 20, marginRight: 20, marginLeft: 20, marginBottom: 10 }}>

                                        <Text style={{ fontWeight: 'bold' }}>{I18n.t('CHANGE_SOURCE_CARD')}</Text>
                                        <Dropdown
                                             containerStyle={{ marginTop: -20 }}
                                             value='serial-number'
                                             data={this.state.inputCardSource}
                                             onChangeText={(value, index, data) => {
                                                  this.setState({
                                                       isDisplaySerialTextInput: isEqual(value, 'serial-number'),
                                                       facade: isEqual(value, 'serial-number') ? 'back' : 'front'
                                                  })
                                             }}
                                             valueExtractor={(value) => value.value}
                                             labelExtractor={(value) => value.name}
                                        />
                                   </View>

                                   {!this.state.isDisplaySerialTextInput &&
                                        <View style={{ marginTop: 10 }}>
                                             <CreditCardInput
                                                  validColor={this.state.creditCardInput.valid ? 'green' : ''}
                                                  invalidColor={!this.state.creditCardInput.valid ? 'red' : ''}
                                                  onChange={this.onCreditCardChange}
                                                  labels={{
                                                       number: I18n.t('CARD_NUMBER_LABEL'),
                                                       expiry: I18n.t('CARD_EXPIRY_LABEL'),
                                                       cvc: I18n.t('CARD_CVC_LABEL'),
                                                  }} />
                                             {
                                                  (this.state.displayCardError) &&
                                                  this.isCreditCardValid().map((item) => (
                                                       <Text style={{ color: 'red', marginLeft: 15 }}>{item}</Text>
                                                  ))
                                             }
                                        </View>
                                   }

                                   {this.state.isDisplaySerialTextInput &&

                                        <View style={{ marginTop: 10, marginRight: 20, marginLeft: 20 }}>
                                             <OutlineTextInput
                                                  borderBottomColor={!this.isNumeroSerieValid.isValid ? 'black' : 'red'}
                                                  value={this.state.numeroSerie}
                                                  keyboardType="numeric"
                                                  label={I18n.t('NUMERO_DE_SERIE')}
                                                  style={{ marginTop: 10 }}
                                                  placeholder={I18n.t('NUMERO_DE_SERIE_DESCRIPTION')}
                                                  onChangeText={(numeroSerie) => {
                                                       this.setState({ numeroSerie });
                                                       this.isNumeroSerieValid();
                                                  }}
                                             />
                                             {
                                                  (!this.isNumeroSerieValid().isValid) &&
                                                  <Text style={{ color: 'red', marginTop: 2 }}>{this.isNumeroSerieValid().errorMessage}</Text>
                                             }
                                             {
                                                  (this.state.isSubmitClick && this.state.numeroSerie.length === 0) &&
                                                  <Text style={{ color: 'red', marginTop: 2 }}>{I18n.t('ENTER_VALID_SERIAL_NUMBER')}</Text>
                                             }
                                             <Text></Text>
                                        </View>
                                   }

                                   <View style={{ marginTop: 10, marginRight: 20, marginLeft: 20, marginBottom: 10 }}>
                                        <OutlineTextInput
                                             borderBottomColor={!this.isMontantValid.isValid ? 'black' : 'red'}
                                             value={this.state.montant}
                                             keyboardType="numeric"
                                             label={I18n.t('AMOUNT_LABEL')}
                                             style={{ marginTop: 10 }}
                                             placeholder={I18n.t('AMOUNT_LABEL_DESCRIPTION')}
                                             onChangeText={(montant) => {
                                                  this.setState({ montant });
                                                  this.isMontantValid();
                                             }}
                                        />
                                        {
                                             (!this.isMontantValid().isValid) &&
                                             <Text style={{ color: 'red', marginTop: 2 }}>{this.isMontantValid().errorMessage}</Text>
                                        }
                                        {
                                             (this.state.isSubmitClick && this.state.montant.length === 0) &&
                                             <Text style={{ color: 'red', marginTop: 2 }}>{I18n.t('PLEASE_ENTER_THE_AMOUNT')}</Text>
                                        }
                                        <Text></Text>
                                   </View>

                                   <View style={{ margin: 10 }}>
                                        <CustomButton loading={this.props.loading} outline onPress={() => this.onSubmitDeposit()}>
                                             {I18n.t('VALIDATE')}
                                        </CustomButton>
                                   </View>
                              </ScrollView>
                         </View>
                    </View>
               </Provider>
          )
     }

}

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

     loadingGetCommission: state.walletGetCommission.loadingGetCommission,
     resultGetCommission: state.walletGetCommission.resultGetCommission,
     errorGetCommission: state.walletGetCommission.errorGetCommission,
});

const mapDispatchToProps = dispatch => bindActionCreators({
     depositAction: depositAction,
     getWalletCommissionAmount: getWalletCommissionAmount,
     walletCommissionAmountReset: walletCommissionAmountReset,
     resetWalletListDetailReducer: resetWalletListDetailReducer,
     depositActionReset
}, dispatch);

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

const styles = StyleSheet.create({
     container: {
          flex: 1,
          backgroundColor: Color.containerBackgroundColor
     },
     checkDefault: {
          flexDirection: "row",
          justifyContent: "space-between",
          alignItems: "center",
          borderBottomWidth: 1,
          paddingVertical: 15,
          marginTop: 10
     },
     contentButtonBottom: {
          borderTopWidth: 1,
          paddingVertical: 10,
          paddingHorizontal: 20,
          flexDirection: "row",
          justifyContent: "space-between",
          alignItems: "center"
     },
     blockView: {
          paddingVertical: 10,
          borderBottomWidth: 1
     },
     lottie: {
          width: 248,
          height: 248
     },
});