import React, { Component } from 'react';
import { Dimensions, Platform, StyleSheet, View, Alert, StatusBar, ScrollView, Text, ProgressBarAndroid, ActivityIndicator, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import I18n from 'react-native-i18n'
import LottieView from 'lottie-react-native';
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 OutlineTextInput from '../../components/OutlineTextInput';
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 { depositAction, depositActionReset } from '../../webservice/DepositApi';
import { getWalletCommissionAmount, walletCommissionAmountReset, resetWalletListDetailReducer } from '../../webservice/WalletApi';
import Dialog from "react-native-dialog";
import { ProgressDialog } from 'react-native-simple-dialogs'
//import Dialog, { DialogContent, DialogTitle, DialogFooter, DialogButton } from 'react-native-popup-dialog';
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';
import style from '../../components/TextInput/styles';
import { responsiveHeight, responsiveWidth, } from 'react-native-responsive-dimensions';


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 {
               drawerLabel: () => null,
               title: I18n.t('MAKE_DEPOSIT')
          }
     };

     constructor(props) {
          super(props);
          this.state = {
               type: "credit",
               montant: '',
               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

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

     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();
                         this.props.depositAction({
                              numCarte: parseInt((this.state.creditCardInput.values.number).replace(/ /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
                         });
                    }} />

               </Dialog.Container>

          );

     }

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

          if (this.isMontantValid().isValid && creditCardInput.valid && this.state.montant.length > 0) {

               console.log("Is Montant Valid", this.isMontantValid.isValid);
               console.log("creditCardInput Valid", creditCardInput.valid);


               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() {
          const { resultGetCommission } = this.props;
          return (
               <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: 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>

                         <View style={{ margin: 20 }}>
                              <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')}
                                   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>
          )
     }

}

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