import Button from 'apsl-react-native-button';
import isEqual from 'lodash/isEqual';
import isNil from 'lodash/isNil';
import React, {Component} from 'react';
import {Alert, ScrollView, StyleSheet, Text, View} from 'react-native';
import * as Animatable from 'react-native-animatable';
import I18n from 'react-native-i18n';
import {responsiveHeight, responsiveWidth} from 'react-native-responsive-dimensions';
import {ProgressDialog} from 'react-native-simple-dialogs';
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import {Fumi} from 'react-native-textinput-effects';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {Color} from '../../../config/Color';
import {FontWeight, Typography} from '../../../config/typography';
import {store} from "../../../redux/store";
import {IlinkEmitter} from '../../../utils/events';
import {readUser} from '../../../webservice/AuthApi';
import {envoieUserWalletToBankAction, envoieUserWalletToBankReset} from '../../../webservice/EnvoieUserApi';
import {isNormalInteger} from '../../../utils/UtilsFunction';

let theme = require('../../../utils/theme.json');
let route = require('../../../route.json');


class EnvoieWalletToBankUser extends Component {

    static navigatorStyle = {
        navBarBackgroundColor: Color.primaryColor,
        statusBarColor: Color.primaryDarkColor,
        navBarTextColor: '#FFFFFF',
        navBarButtonColor: '#FFFFFF'

    };

    static navigationOptions = () => {
        return {
            drawerLabel: () => null,
            headerTitle: I18n.t('DEPOSIT_WALLET_TO_BANK'),
            headerTintColor: 'white',
            headerStyle: {
                backgroundColor: Color.primaryColor,
                marginTop: 0,
                color: 'white'
            },
            headerTitleStyle: {
                color: "white"
            },
            title: I18n.t('DEPOSIT_WALLET_TO_BANK')
        }
    };

    constructor(props) {
        super(props);
        this.state = {
            montant: null,
            password: null,
            codeIban: null,
            loading: false,
            user: null,
            triggerSubmitClick: false,
            isSubmitClick: false,
            isDataSubmit: false,
            isModalConfirmVisible: false,
            wallet: store.getState().walletDetailReducer.result.response,
            bank: this.props.navigation.state.params.bank
        };

        this.props.envoieUserWalletToBankReset();

    }

    componentDidMount() {

        readUser().then((user) => {
            if (user) {
                if (user !== undefined) {
                    this.setState({user});
                }
            }
        });

    }

    componentWillReceiveProps(nextProps) {

        console.log('PROPS', nextProps)

        /*          if (nextProps.resultEnvoieWalletToCardGetCommission != null) {

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

                            if (!nextProps.loadingEnvoieWalletToCardGetCommission)
                                 this.setState({
                                      isModalConfirmVisible: true
                                 });
                       }
                  }*/
    }

    renderEnvoieWalletToBankResponse = () => {

        const {resultEnvoieWalletToBank, errorEnvoieWalletToBank} = this.props;

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

        if (resultEnvoieWalletToBank !== null) {
            if (resultEnvoieWalletToBank.response !== null) {
                Alert.alert(
                    I18n.t("SUCCESS_TRANSFER"),
                    resultEnvoieWalletToBank.response,
                    [
                        {
                            text: I18n.t("OK"), onPress: () => {
                                this.props.envoieUserWalletToBankReset();
                                IlinkEmitter.emit("refreshWallet");
                                this.props.navigation.pop();
                            }
                        }

                    ],
                    {cancelable: false}
                )
            }
        }
    }

    /*     renderDialogGetCommissionResponse = () => {

              const { errorEnvoieWalletToCardGetCommission } = this.props;

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

         }*/


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

    /*
         modalConfirmTransaction = (data) => {

              const frais = data.response.frais;
              const montant_net = data.response.montant_net;

              return (

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

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

                        <View>

                             <View style={[styles.blockView, { borderBottomColor: Color.borderColor }]}>
                                  <View style={{ flexDirection: 'row', marginTop: 10 }}>
                                       <View style={{ flex: 1 }}>
                                            <Text style={[styles.body2]}>{I18n.t('AMOUNT')}</Text>
                                       </View>
                                       <View style={{ flex: 1, alignItems: 'flex-end' }}>
                                            <Text style={[Typography.caption1, Color.grayColor]}>{`${thousands(this.state.montant, ' ')} ${this.state.wallet.currency_code}`}</Text>
                                       </View>
                                  </View>
                                  <View style={{ flexDirection: 'row', marginTop: 10 }}>
                                       <View style={{ flex: 1 }}>
                                            <Text tyle={[Typography.body2]}>{I18n.t('FEES_AND_TAXES')}</Text>
                                       </View>
                                       <View style={{ flex: 1, alignItems: 'flex-end' }}>
                                            <Text style={[Typography.caption1, Color.grayColor]}>{`${thousands(frais, ' ')} ${this.state.wallet.currency_code}`}</Text>
                                       </View>
                                  </View>
                             </View>
                             <View style={{ paddingVertical: 10 }}>
                                  <View style={{ flexDirection: 'row', marginTop: 10 }}>
                                       <View style={{ flex: 1 }}>
                                            <Text tyle={[Typography.body2, FontWeight.bold]}>{I18n.t('NET_AMOUNT')}:</Text>
                                       </View>
                                       <View style={{ flex: 1, alignItems: 'flex-end' }}>
                                            <Text style={[Typography.caption1, Color.grayColor]}>{`${thousands(montant_net, ' ')} ${this.state.wallet.currency_code}`}</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.envoieUserWalletToCardAction({
                                  type: 2,
                                  cvv: this.state.codeCVV,
                                  id_wallet_user: this.state.wallet.id,
                                  montant: this.state.montant,
                                  password: this.state.password
                             });
                             this.props.getCommissionUserWalletToCardReset();
                        }} />

                   </Dialog.Container>

              );

         }
    */

    ckeckIfFieldIsOK(champ) {
        return (isNil(champ) || isEqual(champ.length, 0));
    }

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

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

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

    onSubmitSendWalletToBank = () => {
        const {montant, password, codeIban} = this.state;

        if (this.ckeckIfFieldIsOK(codeIban)) {
            if (!(codeIban.length >= 14 && codeIban <= 34))
                this.codeIbanAnim.shake(800);
            else
                this.codeIbanAnim.shake(800);
        } else if (this.ckeckIfFieldIsOK(montant) || !this.isMontantValid().isValid) {
            this.montantAnim.shake(800);
        } else if (this.ckeckIfFieldIsOK(password))
            this.passwordAnim.shake(800);
        else {

            console.log("id wallet network", this.state.bank);
            this.props.envoieUserWalletToBankAction({
                type: 4,
                id_wallet_user: this.state.wallet.id,
                id_wallet_network: this.state.wallet.id_wallet_network,
                iban: codeIban,
                id_bank: this.state.bank.id_bank,
                montant: montant,
                password: password
            });

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


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

    render() {
        return (
            <>
                {this.props.loadingEnvoieWalletToBank && this.renderLoader()}
                {this.state.isDataSubmit && this.renderEnvoieWalletToBankResponse()}
                <ScrollView style={styles.container}>

                    <Text style={styles.subbigtitle}>{I18n.t('ENVOIE_WALLET_TO_BANK')}</Text>

                    <Animatable.View ref={(comp) => {
                        this.codeIbanAnim = comp
                    }}>
                        <Fumi iconClass={FontAwesomeIcon} iconName={'id-card'}
                              label={I18n.t('CODE_IBAN')}
                              iconColor={'#f95a25'}
                              iconSize={20}
                              value={this.state.codeIban}
                              onChangeText={(codeIban) => {

                                  this.setState({codeIban})
                              }}
                              style={styles.input}
                        >
                        </Fumi>
                    </Animatable.View>

                    <Animatable.View ref={(comp) => {
                        this.montantAnim = comp
                    }}>
                        <Fumi iconClass={FontAwesomeIcon} iconName={'money'}
                              label={I18n.t('AMOUNT')}
                              iconColor={'#f95a25'}
                              keyboardType='numeric'
                              iconSize={20}
                              value={this.state.montant}
                              onChangeText={(montant) => {
                                  this.setState({montant})
                              }}
                              style={styles.input}
                        >
                        </Fumi>
                        <View style={{
                            position: 'absolute',
                            left: responsiveWidth(82),
                            top: 35,
                            flexDirection: 'row'
                        }}>
                            <View
                                style={{
                                    width: 1,
                                    borderLeftColor: '#f0f0f0',
                                    height: 40,
                                    left: -8,
                                    top: -10,
                                    borderLeftWidth: 1,

                                }}
                            />
                            <Text style={[Typography.body1, FontWeight.bold]}>{this.state.wallet.currency_code}</Text>
                        </View>
                    </Animatable.View>

                    <Animatable.View ref={(comp) => {
                        this.passwordAnim = comp
                    }}>
                        <Fumi iconClass={FontAwesomeIcon} iconName={'lock'}
                              label={I18n.t('PASSWORD')}
                              iconColor={'#f95a25'}
                              iconSize={20}
                              secureTextEntry={true}
                              value={this.state.password}
                              onChangeText={(password) => {
                                  this.setState({password})
                              }}
                              style={styles.input}
                        >
                        </Fumi>
                    </Animatable.View>

                    <Button style={styles.btnvalide}
                            textStyle={styles.textbtnvalide}
                            onPress={() => {
                                this.onSubmitSendWalletToBank()
                            }}>
                        {I18n.t('SUBMIT_LABEL')}</Button>
                </ScrollView>
            </>
        )
    }
}

const maptStateToProps = state => ({

    loadingEnvoieWalletToBank: state.envoieUserWalletToBank.loading,
    resultEnvoieWalletToBank: state.envoieUserWalletToBank.result,
    errorEnvoieWalletToBank: state.envoieUserWalletToBank.error,

});

const mapDispatchToProps = dispatch => bindActionCreators({

    envoieUserWalletToBankAction,
    envoieUserWalletToBankReset,

}, dispatch);

export default connect(maptStateToProps, mapDispatchToProps)(EnvoieWalletToBankUser);

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: Color.primaryDarkColor,
    },
    textbtnvalide: {
        color: 'white',
        fontWeight: 'bold'
    },
    bigtitle: {
        color: 'white',
        fontSize: 20,
        flex: 1,
        fontWeight: 'bold',
        textAlign: 'center',
        margin: 20,
    },
    blockView: {
        paddingVertical: 10,
        borderBottomWidth: 1
    },
    subbigtitle: {
        color: 'white',
        fontSize: 17,
        textAlign: 'center',
        margin: 5,
    },
    btnvalide: {
        marginTop: 20,
        marginLeft: 20,
        marginRight: 20,
        borderColor: 'transparent',
        backgroundColor: Color.accentLightColor,
        height: 52
    },
    btnSubmit: {
        marginTop: 20,
        borderColor: 'transparent',
        backgroundColor: Color.accentLightColor,
        height: 52,
        width: "30%",
        marginLeft: 20,
        marginRight: 20,
    },
    input: {
        height: 60,
        marginTop: responsiveHeight(2),
        marginLeft: responsiveWidth(5),
        marginRight: responsiveWidth(5),
        borderRadius: 5,
    }
});