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 { Dropdown } from 'react-native-material-dropdown';
import { responsiveHeight, responsiveWidth } from 'react-native-responsive-dimensions';
import { ProgressDialog } from 'react-native-simple-dialogs';
import { Fumi } from 'react-native-textinput-effects';
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
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 { isNormalInteger, typeEpargne } from '../../utils/UtilsFunction';
import { readUser } from '../../webservice/AuthApi';
import { getNanoCreditDemandDurationAction, getNanoCreditDemandDurationReset } from '../../webservice/NanoCreditApi';
import { epargnerArgentUserAction, epargnerArgentUserReset } from "../../webservice/user/NanoCreditApi";
let theme = require('../../utils/theme.json');
let route = require('../../route.json');


class EpargnerArgentUser extends Component {

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

     };

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

     constructor(props) {
          super(props);
          this.state = {
               codeGroupe: null,
               codeSponsor: null,
               nomGroupe: null,
               codeSponsor: null,
               user: null,
               montant: null,
               password: null,
               durations: [],
               durationSelect: null,
               triggerSubmitClick: false,
               hasLoadDuration: false,
               modalVisible: false,
               isSubmitClick: false,
               isDataSubmit: false,
               isModalConfirmVisible: false,
               typeEpargne: typeEpargne(),
               typeEpargneName: (typeEpargne()[0]).name,
               typeEpargneToSend: 'simple',
               wallet: store.getState().walletDetailReducer.result.response
          };

          this.props.getNanoCreditDemandDurationReset();

          readUser().then((user) => {
               console.log("USER", user);
               if (user) {
                    if (user !== undefined) {
                         this.props.getNanoCreditDemandDurationAction(user.id);
                    }
               }
          })

     }

     componentDidMount() {

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

     }

     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 if (montant > parseInt(this.state.comptePrincipal))
               return {
                    errorMessage: I18n.t('AMOUNT_SUPERIOR_TO_PRINCIPAL_ACCOUNT'),
                    isValid: false
               };

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

     renderGetDurationesponse = () => {
          const { resultGetNanoCreditDuration, errorGetNanoCreditDuration } = this.props;
          if (resultGetNanoCreditDuration !== null) {
               if (typeof resultGetNanoCreditDuration.response !== 'undefined') {
                    if (resultGetNanoCreditDuration.response.length > 0) {
                         this.setState({
                              hasLoadDuration: true,
                              durations: resultGetNanoCreditDuration.response,
                              durationSelect: resultGetNanoCreditDuration.response[0].value,
                              modalVisible: false
                         });
                    }
                    else if (resultGetNanoCreditDuration.response.length === 0) {
                         this.setState({
                              hasLoadDuration: true,
                              durations: [],
                              durationSelect: '',
                              modalVisible: false
                         });
                    }
               }
          }

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

                         ],
                         { cancelable: false }
                    )
               } else {
                    Alert.alert(
                         I18n.t('ERROR_LABEL'),
                         JSON.stringify(errorGetNanoCreditDuration),
                         [
                              {
                                   text: I18n.t("OK"), onPress: () => {
                                        this.props.getNanoCreditDemandDurationReset();
                                   }
                              }

                         ],
                         { cancelable: false }
                    )
               }
          }
     }


     renderEpargnerArgentResponse = () => {

          const { result, error } = this.props;

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

          if (result !== null) {
               if (result.response !== null) {
                    Alert.alert(
                         I18n.t("EPARGNE_DEPOSE"),
                         result.response,
                         [
                              {
                                   text: I18n.t("OK"), onPress: () => {
                                        this.props.epargnerArgentUserReset();
                                        //IlinkEmitter.emit("treatNanoGroupDemand");
                                        this.props.navigation.pop();
                                   }
                              }

                         ],
                         { cancelable: false }
                    )
               }
          }
     }

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


     onSubmitEpargnerArgent = () => {
          const { montant, typeEpargneName, durationSelect } = this.state;

          if (this.ckeckIfFieldIsOK(typeEpargneName))
               this.typeEpargneAnim.shake(800);
          else if (this.ckeckIfFieldIsOK(durationSelect))
               this.typeEpargneAnim.shake(800);
          else if (this.ckeckIfFieldIsOK(montant) || !this.isMontantValid().isValid)
               this.montantAnim.shake(800);
          else {

               this.props.epargnerArgentUserAction({
                    id_user: this.state.user.id,
                    type: this.state.typeEpargneToSend,
                    duree_mois: this.state.durationSelect,
                    montant: this.state.montant,
                    password: this.state.password
               });

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


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

     render() {
          return (
               <>
                    {(this.props.loading || this.props.loadingGetNanoCredit || this.state.modalVisible) && this.renderLoader()}
                    {this.state.isDataSubmit && this.renderEpargnerArgentResponse()}
                    {!this.state.hasLoadDuration && this.renderGetDurationesponse()}
                    <ScrollView style={styles.container}>

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

                         <Animatable.View ref={(comp) => { this.typeEpargneAnim = comp }}
                              style={{
                                   width: responsiveWidth(90),
                                   height: 60,
                                   marginTop: 20,
                                   alignSelf: 'center',
                                   borderRadius: 10,
                                   paddingLeft: 20,
                                   paddingRight: 20,
                                   backgroundColor: 'white'
                              }}>
                              <Dropdown
                                   label={I18n.t('DEMAND_DURATION_IN_MONTH')}
                                   data={this.state.durations}
                                   useNativeDriver={true}
                                   value={this.state.durationSelect !== null ? this.state.durationSelect : ''}
                                   onChangeText={(value, index, data) => {
                                        this.setState({ durationSelect: value });
                                   }}
                                   valueExtractor={(value) => { return value.value }}
                                   labelExtractor={(value) => { return value.value }}
                              />
                         </Animatable.View>

                         <Animatable.View ref={(comp) => { this.typeEpargneAnim = comp }}
                              style={{
                                   width: responsiveWidth(90),
                                   height: 60,
                                   marginTop: 20,
                                   alignSelf: 'center',
                                   borderRadius: 10,
                                   paddingLeft: 20,
                                   paddingRight: 20,
                                   backgroundColor: 'white'
                              }}>
                              <Dropdown
                                   label={I18n.t('SAVE_MONEY_TYPE')}
                                   data={this.state.typeEpargne}
                                   useNativeDriver={true}
                                   value={this.state.typeEpargneName}
                                   onChangeText={(value, index, data) => {
                                        if (value === I18n.t('SIMPLE'))
                                             this.setState({
                                                  typeEpargneToSend: 'simple',
                                                  typeEpargneName: I18n.t('SIMPLE')
                                             });
                                        else
                                             this.setState({
                                                  typeEpargneToSend: 'blocked',
                                                  typeEpargneName: I18n.t('BLOCKED')
                                             })
                                   }}
                                   valueExtractor={(value) => { return value.name }}
                                   labelExtractor={(value) => { return value.name }}
                              />
                         </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.onSubmitEpargnerArgent(); }}>
                              {I18n.t('SUBMIT_LABEL')}</Button>
                    </ScrollView>
               </>
          )
     }
}

const maptStateToProps = state => ({

     loading: state.epargnerArgentUserReducer.loading,
     result: state.epargnerArgentUserReducer.result,
     error: state.epargnerArgentUserReducer.error,

     loadingGetNanoCreditDuration: state.getNanoCreditDemandDurationReducer.loading,
     resultGetNanoCreditDuration: state.getNanoCreditDemandDurationReducer.result,
     errorGetNanoCreditDuration: state.getNanoCreditDemandDurationReducer.error,
});

const mapDispatchToProps = dispatch => bindActionCreators({

     epargnerArgentUserAction,
     epargnerArgentUserReset,

     getNanoCreditDemandDurationAction,
     getNanoCreditDemandDurationReset

}, dispatch);

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

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