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";
import {IlinkEmitter} from "../../utils/events";

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,
            displayDuration: false,
            user: null,
            montant: null,
            password: null,
            durations: [],
            durationSelect: null,
            triggerSubmitClick: false,
            hasLoadDuration: false,
            modalVisible: false,
            isSubmitClick: false,
            isDataSubmit: false,
            isModalConfirmVisible: false,
            typeEpargne: typeEpargne(),
            typeEpargneName: I18n.t((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({id_user: user.id, type: "epargne"});
                }
                ;
            }
        })

    }

    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");
                                IlinkEmitter.emit("updateNanoCreditAccount");
                                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.state.displayDuration)
            this.durationAnim.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('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'),
                                        displayDuration: false

                                    });
                                else
                                    this.setState({
                                        typeEpargneToSend: 'blocked',
                                        typeEpargneName: I18n.t('BLOCKED'),
                                        displayDuration: true
                                    })
                            }}
                            valueExtractor={(value) => {
                                return I18n.t(value.name)
                            }}
                            labelExtractor={(value) => {
                                return I18n.t(value.name)
                            }}
                        />
                    </Animatable.View>

                    {
                        this.state.displayDuration &&
                        <Animatable.View ref={(comp) => {
                            this.durationAnim = 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.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,
    }
});