import isEqual from 'lodash/isEqual';
import isNil from 'lodash/isNil';
import React, {Component} from 'react';
import {
    ActivityIndicator,
    Alert,
    ProgressBarAndroid,
    ScrollView,
    StyleSheet,
    Text,
    TouchableOpacity,
    View
} from 'react-native';
import I18n from 'react-native-i18n';
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 omit from 'lodash/omit';
import {Color} from '../../config/Color';
import {Typography} from '../../config/typography';
import {IlinkEmitter} from '../../utils/events';
import {readUser} from '../../webservice/AuthApi';
import {getEpargneInProgressAction, getEpargneInProgressReset} from '../../webservice/NanoCreditApi';
import {casserEpargneUserAction, casserEpargneUserReset} from '../../webservice/user/NanoCreditApi';
import {cutString, cutStringWithoutDot, nanoCreditHistoryLabel} from "../../utils/UtilsFunction";
import * as Utils from "../../utils/DeviceUtils";
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import thousands from "thousands";
import Dialog from "react-native-dialog";


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


class CasserEpargneUser extends Component {


    constructor(props) {
        super(props);
        this.state = {
            password: null,
            idEpargne: null,
            codeGroup: null,
            loading: false,
            user: null,
            triggerSubmitClick: false,
            isSubmitClick: false,
            isDataSubmit: false,
            isModalConfirmVisible: false,
            isGroupToModify: false,
            displayModalHistory: false,
            historyItemDetail: null,
            isDataHasLoaded: false,
            displayPasswordModal: false,
            wallet: this.props.navigation.state.params.wallet,
        };
        this.props.getEpargneInProgressReset();

    }

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

    };

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

    componentDidMount() {

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

                }
            }
        });

    }

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

    renderBreakEpargneRespons = () => {

        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.casserEpargneUserReset();
                            }
                        }
                    ],
                    {cancelable: false}
                )
            }
        }

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

                    ],
                    {cancelable: false}
                )
            }
        }
    }

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

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

    onSubmitCasserEpargne = () => {
        const {idEpargne, password} = this.state;

        if (this.ckeckIfFieldIsOK(idEpargne))
            this.idEpargneAnim.shake(800);
        else if (this.ckeckIfFieldIsOK(password))
            this.passwordAnim.shake(800);
        else {

            this.props.casserEpargneUserAction({
                id_user: this.state.user.id,
                id_epargne: this.state.idEpargne,
                password: this.state.password
            }, 0);
        }
        this.setState({
            isDataSubmit: true
        });
    }

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

    renderModalHistoryDetail = () => {
        return (

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

                <Dialog.Title>{I18n.t('DEMAND_DETAIL')}</Dialog.Title>
                {
                    <ScrollView>
                        <View style={[styles.blockView, {borderBottomColor: Color.borderColor}]}>
                            <View style={{flexDirection: 'row', marginTop: 10}}>
                                <View style={{flex: 1}}>
                                    <Text style={[styles.body2]}>{I18n.t('ID_SAVINGS')}</Text>
                                </View>
                                <View style={{flex: 1, alignItems: 'flex-end'}}>
                                    <Text
                                        style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.id_epargne}</Text>
                                </View>
                            </View>
                            <View style={{flexDirection: 'row', marginTop: 10}}>
                                <View style={{flex: 1}}>
                                    <Text style={[styles.body2]}>{I18n.t('STATUS')}</Text>
                                </View>
                                <View style={{flex: 1, alignItems: 'flex-end'}}>
                                    <Text
                                        style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.etat}</Text>
                                </View>
                            </View>
                            <View style={{flexDirection: 'row', marginTop: 10}}>
                                <View style={{flex: 1}}>
                                    <Text style={[styles.body2]}>{I18n.t('DEMAND_DURATION_IN_MONTH')}</Text>
                                </View>
                                <View style={{flex: 1, alignItems: 'flex-end'}}>
                                    <Text
                                        style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.duree_mois}</Text>
                                </View>
                            </View>
                            <View style={{flexDirection: 'row', marginTop: 10}}>
                                <View style={{flex: 1}}>
                                    <Text style={[styles.body2]}>Type</Text>
                                </View>
                                <View style={{flex: 1, alignItems: 'flex-end'}}>
                                    <Text
                                        style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.type}</Text>
                                </View>
                            </View>
                            <View style={{flexDirection: 'row', marginTop: 10}}>
                                <View style={{flex: 1}}>
                                    <Text tyle={[Typography.body2]}>{I18n.t('AMOUNT')}</Text>
                                </View>
                                <View style={{flex: 1, alignItems: 'flex-end'}}>
                                    <Text
                                        style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.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('AMOUNT_WITHDRAWAL')}</Text>
                                </View>
                                <View style={{flex: 1, alignItems: 'flex-end'}}>
                                    <Text
                                        style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.montant_retire + ' ' + this.state.wallet.currency_code}</Text>
                                </View>
                            </View>
                            <View style={{flexDirection: 'row', marginTop: 10}}>
                                <View style={{flex: 1}}>
                                    <Text tyle={[Typography.body2]}>{I18n.t('TAXES')}</Text>
                                </View>
                                <View style={{flex: 1, alignItems: 'flex-end'}}>
                                    <Text
                                        style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.taxe + ' ' + this.state.wallet.currency_code}</Text>
                                </View>
                            </View>
                            <View style={{flexDirection: 'row', marginTop: 10}}>
                                <View style={{flex: 1}}>
                                    <Text tyle={[Typography.body2]}>{I18n.t('INTERET')}</Text>
                                </View>
                                <View style={{flex: 1, alignItems: 'flex-end'}}>
                                    <Text
                                        style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.interet + ' ' + this.state.wallet.currency_code}</Text>
                                </View>
                            </View>
                            <View style={{flexDirection: 'row', marginTop: 10}}>
                                <View style={{flex: 1}}>
                                    <Text style={[styles.body2]}>{I18n.t('CREATION_DATE')}</Text>
                                </View>
                                <View style={{flex: 1, alignItems: 'flex-end'}}>
                                    <Text
                                        style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_creation}</Text>
                                </View>
                            </View>
                            <View style={{flexDirection: 'row', marginTop: 10}}>
                                <View style={{flex: 1}}>
                                    <Text tyle={[Typography.body2]}>{I18n.t('FINAL_DATE')}</Text>
                                </View>
                                <View style={{flex: 1, alignItems: 'flex-end'}}>
                                    <Text
                                        style={[Typography.caption1, Color.grayColor]}>{isEqual(this.state.historyItemDetail.type, 'SIMPLE') ? I18n.t('NON_APPLICABLE') : this.state.historyItemDetail.date_fin}</Text>
                                </View>
                            </View>
                            <View style={{flexDirection: 'row', marginTop: 10}}>
                                <View style={{flex: 1}}>
                                    <Text tyle={[Typography.body2]}>{I18n.t('CASSATION_DATE')}</Text>
                                </View>
                                <View style={{flex: 1, alignItems: 'flex-end'}}>
                                    <Text
                                        style={[Typography.caption1, Color.grayColor]}>{this.state.historyItemDetail.date_cassation}</Text>
                                </View>
                            </View>
                        </View>
                    </ScrollView>

                }
                <Dialog.Button bold={true} label={I18n.t('CANCEL_LABEL')} onPress={() => {
                    this.setState({
                        displayModalHistory: !this.state.displayModalHistory,
                    });

                }}/>

                <Dialog.Button bold={true} label={I18n.t('SUBMIT_LABEL')} onPress={() => {

                    this.setState({
                        displayPasswordModal: !this.state.displayPasswordModal,
                    });

                }}/>

            </Dialog.Container>

        );
    }

    renderPasswordDialog = () => {
        return (
            <Dialog.Container useNativeDriver={true} visible={this.state.displayPasswordModal}>

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

                <Dialog.Input placeholder={I18n.t('PLEASE_ENTER_THE_PASSWORD')}
                              style={{borderBottomWidth: 1, borderBottomColor: Color.borderColor}}
                              showSoftInputOnFocus={true}
                              onChangeText={(password) => {
                                  this.setState({password})
                              }}
                              secureTextEntry={true}
                              value={this.state.password}
                              onSubmitEditing={() => {
                                  this.setState({
                                      displayPasswordModal: false,
                                      displayModalHistory: false,
                                      isDataSubmit: true
                                  });
                                  this.props.refundCreditDemandUserAction({
                                      id_user: this.state.user.id,
                                      id_epargne: this.state.historyItemDetail.id_epargne,
                                      password: this.state.password
                                  });
                              }}/>

                <Dialog.Button label={I18n.t('CANCEL_LABEL')} onPress={() => {
                    this.setState({displayPasswordModal: !this.state.displayPasswordModal});
                }}/>
                <Dialog.Button label={I18n.t('SUBMIT_LABEL')} onPress={() => {
                    this.setState({
                        displayPasswordModal: false,
                        displayModalHistory: false,
                        isDataSubmit: true
                    })
                    this.props.casserEpargneUserAction({
                        id_user: this.state.user.id,
                        id_epargne: this.state.historyItemDetail.id_epargne,
                        password: this.state.password
                    });
                }}/>
            </Dialog.Container>
        );
    }

    renderNanoCreditItem = (item, index) => {

        return (
            <TouchableOpacity onPress={() => {
                this.setState({displayModalHistory: true, historyItemDetail: item})
            }} style={[styles.contentService, {borderBottomColor: Color.primaryColor}]}>
                {
                    Object.keys(omit(item, ['id', 'id_epargne', 'montant_retire', 'type', 'date_demande', 'date_fin', 'date_remboursement_prevu', 'date_validation', 'date_cassation', 'date_remboursement', 'id_demande', 'duree_mois', 'taxe', 'date_fin', 'date_cassation', 'id_user', 'id_network', 'user', 'partiellement_rembourse', 'user_phone', 'interet', 'date_remboursement_prevu', 'date_remboursement', 'id_wallet_agent', 'retrait_cash', 'codeParrain', 'agent', 'montant_rembourse', ''])).map((element, i) => (
                        <View style={{alignItems: 'center'}} key={i}>

                            <Text style={[Typography.overline, Color.grayColor], {marginTop: 4}}>
                                {
                                    isEqual(element, 'montant') ?
                                        `  ${item[element].length > 8 ? cutString(thousands(item[element], ' '), 6) : thousands(item[element], ' ')} ${this.state.wallet.currency_code}`
                                        : isEqual(element, 'date_creation') ?
                                        cutStringWithoutDot(item[element], 16)
                                        : item[element]
                                }
                            </Text>
                        </View>
                    ))
                }
            </TouchableOpacity>
        );
    }

    renderNanoCreditList = () => {
        const {errorNanoCreditHistory, resultNanoCreditHistory} = this.props;
        if (errorNanoCreditHistory !== null) {
            if (typeof errorNanoCreditHistory.data !== 'undefined') {
                return (
                    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                        <Text style={Typography.body1}>{errorNanoCreditHistory.data.error}</Text>
                    </View>
                )
            } else {
                return (
                    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                        <Text style={Typography.body1}>{errorNanoCreditHistory}</Text>
                    </View>
                )
            }
        }


        if (resultNanoCreditHistory !== null) {
            if (resultNanoCreditHistory.response !== null) {
                return (
                    Array.isArray(resultNanoCreditHistory.response) && (resultNanoCreditHistory.response.length) > 0 ?
                        (
                            <>
                                <View style={[styles.contentService, {borderBottomColor: Color.primaryColor}]}>
                                    {
                                        nanoCreditHistoryLabel().map((item, index) => (
                                            <View style={{alignItems: 'center'}} key={index}>
                                                <Icon name={item.icon} size={24} color={Color.primaryColor}/>
                                                <Text style={[Typography.overline, Color.grayColor], {marginTop: 4}}>
                                                    {I18n.t(item.label)}
                                                </Text>
                                            </View>
                                        ))
                                    }
                                </View>
                                {
                                    resultNanoCreditHistory.response.map((item, index) => (
                                        this.renderNanoCreditItem(item, index)
                                    ))
                                }
                            </>
                        ) :
                        (
                            <View style={{flex: 1, justifyContent: 'center', alignItems: 'flex-start'}}>
                                <Text style={Typography.body1}>{I18n.t('NO_SAVINGS')}</Text>
                            </View>
                        )
                )
            }
        }
    }

    renderNanoCreditHistory = () => {
        return (
            <View style={{backgroundColor: Color.containerBackgroundColor, flex: 1}}>

                {
                    this.props.loadingNanoCreditHistory ?
                        (
                            <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                                {Platform.OS === 'android'
                                    ?
                                    (
                                        <>
                                            <ProgressBarAndroid/>
                                            <Text>{I18n.t('LOADING_DOTS')}</Text>

                                        </>
                                    ) :
                                    <>
                                        <ActivityIndicator size="large" color={'#ccc'}/>
                                        <Text>{I18n.t('LOADING_DOTS')}</Text>
                                    </>
                                }
                            </View>
                        ) : this.renderNanoCreditList()

                }
            </View>
        );
    }


    render() {
        return (
            <>
                {(this.props.loading || this.props.loadingGetCommission || this.props.loadingNanoCreditHistory) && this.renderLoader()}
                {this.state.isDataSubmit && this.renderBreakEpargneRespons()}
                {this.state.displayModalHistory && this.renderModalHistoryDetail()}
                {this.state.displayPasswordModal && this.renderPasswordDialog()}
                <ScrollView style={styles.container}>

                    <View style={[styles.checkDefault, {borderBottomColor: Color.borderColor}]}>
                        <Text
                            style={[Typography.title3, Typography.semibold]}>
                            {I18n.t('SAVINGS_LIST')}
                        </Text>
                    </View>

                    {
                        this.renderNanoCreditHistory()
                    }

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

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

                                        this.setState({ idEpargne })
                                   }}
                                   style={styles.input}
                              >
                              </Fumi>
                         </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.onSubmitCasserEpargne(); }}>
                              {this.state.isGroupToModify ? I18n.t('MODIFY') : I18n.t('SUBMIT_LABEL')}</Button>*/}
                </ScrollView>
            </>
        )
    }
}

const maptStateToProps = state => ({

    loading: state.casserEpargneUserReducer.loading,
    result: state.casserEpargneUserReducer.result,
    error: state.casserEpargneUserReducer.error,

    errorNanoCreditHistory: state.getEpargneInProgressReducer.error,
    resultNanoCreditHistory: state.getEpargneInProgressReducer.result,
    loadingNanoCreditHistory: state.getEpargneInProgressReducer.loading,
});

const mapDispatchToProps = dispatch => bindActionCreators({

    casserEpargneUserAction,
    casserEpargneUserReset,
    getEpargneInProgressAction,
    getEpargneInProgressReset

}, dispatch);

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

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: Color.containerBackgroundColor,
        paddingHorizontal: 20
    },
    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,
    },
    circlePoint: {
        width: 50,
        height: 50,
        borderRadius: 25,
        marginRight: 5,
        alignItems: 'center',
        justifyContent: 'center',
    },
    checkDefault: {
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        borderBottomWidth: 1,
        paddingVertical: 10,
        marginTop: 5
    },
    transactionContainer: {
        flexDirection: 'row',
        paddingTop: 10,
    },
    containerTouch: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
        shadowColor: Color.borderColor,
        borderColor: Color.borderColor,
        borderWidth: 0.5,
        shadowOffset: {width: 1.5, height: 1.5},
        shadowOpacity: 1.0,
        elevation: 5,
        borderRadius: 10,
        backgroundColor: Color.cardBackgroundColor
    },

    contain: {
        flexDirection: 'row',
        justifyContent: 'space-between',
    },
    imageBanner: {
        marginTop: 15,
        marginLeft: 5,
        width: Utils.scaleWithPixel(30),
        height: Utils.scaleWithPixel(30)
    },
    content: {
        height: Utils.scaleWithPixel(65),
        paddingHorizontal: 10,
        justifyContent: 'space-between',
        alignItems: 'flex-start',
        flex: 1,
    },
    contentTitle: {
        paddingTop: 12,
    },
    contentService: {
        paddingVertical: 10,
        borderBottomWidth: 0.5,
        flexDirection: 'row',
        flexWrap: 'wrap',
        justifyContent: 'space-between',
    },
    containField: {
        padding: 10,
        marginBottom: 20,
        borderWidth: 0.5,
        shadowOffset: {width: 1.5, height: 1.5},
        shadowOpacity: 1.0,
        elevation: 5,
        flexDirection: "row",
        height: 140,
        borderRadius: 10
    },
    paymentItem: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        borderBottomWidth: 1,
        paddingVertical: 5,
        width: responsiveWidth(100),
        marginBottom: 15
    },
    iconContent: {
        width: 60,
        marginRight: 10,
        alignItems: "center"
    },
    contentLeftItem: {
        flex: 1,
        paddingTop: 40,
        paddingLeft: 10,
        paddingRight: 10,
        alignItems: "center"
    },
});