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, TouchableOpacity, View} from 'react-native';
import * as Animatable from 'react-native-animatable';
import Dialog from "react-native-dialog";
import I18n from 'react-native-i18n';
import {responsiveFontSize, 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 thousands from 'thousands';
import {Color} from '../../../config/Color';
import {FontWeight, Typography} from '../../../config/typography';
import {store} from "../../../redux/store";
import {readUser} from '../../../webservice/AuthApi';
import {
    envoieUserWalletToCardAction,
    envoieUserWalletToCardReset,
    getCommissionUserWalletToCardAction,
    getCommissionUserWalletToCardReset
} from '../../../webservice/EnvoieUserApi';
import {
    getAvisImpositionAction,
    getAvisImpositionReset,
    getQRCodeDetailAction,
    getQRCodeDetailReset,
    searchUserAction,
    searchUserReset
} from "../../../webservice/regisseur/WalletRegisseurApi";
import moment from "moment-timezone";
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import QRCodeScanner from "react-native-qrcode-scanner";
import {RNCamera} from "react-native-camera";

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


class ModifyTaxeImposition extends Component {

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

    };

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

    constructor(props) {
        super(props);
        this.state = {
            montant: null,
            password: null,
            numeroSerie: '',
            numCarte: 0,
            codeAgent: '',
            expiration_date: '',
            creditCardInput: {},
            displayCardError: false,
            loading: false,
            user: null,
            displayFirstStep: true,
            displaySecondStep: false,
            triggerSubmitClick: false,
            isSubmitClick: false,
            isDataSubmit: false,
            isModalConfirmVisible: false,
            displayDialogResultSearch: false,
            displayPhoneField: true,
            displayQRCode: false,
            wallet: store.getState().walletDetailReducer.result.response
        };

        this.props.envoieUserWalletToCardReset();
        this.props.getCommissionUserWalletToCardReset();
        this.props.getAvisImpositionReset();
        this.props.searchUserReset();
        this.props.getQRCodeDetailReset();

    }

    componentDidMount() {

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

    }

    componentWillReceiveProps(nextProps) {

        console.log('PROPS', nextProps);

        if (nextProps.resultGetAvisImposition !== null) {
            this.setState({
                displayFirstStep: !this.state.displayFirstStep,
                displaySecondStep: !this.state.displaySecondStep,
            });
        }

        if (nextProps.resultGetQRCodeDetail !== null) {
            if (nextProps.resultGetQRCodeDetail.response !== null) {
                this.setState({codeAgent: '' + nextProps.resultGetQRCodeDetail.response.phone})
            }
        }

        if (nextProps.resultSearchUserByName !== null) {
            this.setState({displayDialogResultSearch: true});
        }

        if (nextProps.errorGetQRCodeDetail !== null) {
            if (typeof nextProps.errorGetQRCodeDetail.data !== 'undefined') {
                Alert.alert(
                    I18n.t("ERROR_LABEL"),
                    nextProps.errorGetAvisImposition.data.error,
                    [
                        {
                            text: I18n.t("OK"), onPress: () => {
                                this.props.getAvisImpositionReset();
                                this.setState({
                                    displayPhoneField: false,
                                    codeAgent: ''
                                });
                            }
                        }
                    ],
                    {cancelable: false}
                );
            }
        }

        if (nextProps.errorGetAvisImposition !== null) {
            if (typeof nextProps.errorGetAvisImposition.data !== 'undefined') {
                Alert.alert(
                    I18n.t("ERROR_LABEL"),
                    nextProps.errorGetAvisImposition.data.error,
                    [
                        {
                            text: I18n.t("BY_NAME"), onPress: () => {
                                this.props.getAvisImpositionReset();
                                this.setState({
                                    displayPhoneField: false,
                                    codeAgent: ''
                                });
                            }
                        },
                        {
                            text: I18n.t('BY_QR_CODE'), onPress: () => {
                                this.props.getAvisImpositionReset();
                                this.setState({
                                    displayQRCode: true,
                                    codeAgent: ''
                                });
                            },
                            style: 'cancel'
                        }
                    ],
                    {cancelable: false}
                );
            }
        }


        if (nextProps.resultGetAvisImposition !== null) {
            this.setState({
                displayFirstStep: !this.state.displayFirstStep,
                displaySecondStep: !this.state.displaySecondStep,
            });
        }

        if (nextProps.resultEnvoieWalletToCardGetCommission != null) {

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

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

    onScanQRCode = (result) => {
        this.setState({displayQRCode: false});
        this.props.getQRCodeDetailAction(result.data);
        console.log("QR Code Scan Result", result);
    }

    renderDialogResultSearchUser = () => {

        const {resultSearchUserByName, errorGetAvisImposition} = this.props;
        console.log("resultGetAvisImposition", resultSearchUserByName);
        return (
            <Dialog.Container contentStyle={{width: responsiveWidth(80)}} useNativeDriver={true}
                              visible={this.state.displayDialogResultSearch}>

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

                <ScrollView style={[styles.blockView, {borderBottomColor: Color.borderColor, maxHeight: 300}]}>
                    {
                        Array.isArray(resultSearchUserByName.response) && (resultSearchUserByName.response.length) > 0 ?

                            resultSearchUserByName.response.map((item) => (
                                <TouchableOpacity onPress={() => {
                                    this.props.searchUserReset();
                                    this.setState({
                                        codeAgent: item.phone,
                                        displayDialogResultSearch: false
                                    }, () => {
                                        this.props.getAvisImpositionAction(this.state.codeAgent);
                                    })
                                }} style={[styles.paymentItem]}>

                                    <View style={{
                                        flexDirection: 'column',
                                    }}>

                                        <Text style={styles.title}>{item.lastname}</Text>

                                        <Text
                                            style={styles.description}>{`${item.phone} | ${item.email} | ${item.adresse}`}</Text>

                                    </View>
                                </TouchableOpacity>
                            )) :
                            <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                                <Text style={Typography.body1}>{I18n.t('NO_USAGER_CORRESPONDING_TO_SEARCH')}</Text>
                            </View>

                    }
                </ScrollView>

                <Dialog.Button bold={true} label={I18n.t('OK')} onPress={() => {
                    this.props.searchUserReset();
                    this.setState({
                        displayDialogResultSearch: false
                    }, () => {
                        console.log("STATE", this.state);
                    });

                }}/>
            </Dialog.Container>
        )
    }

    renderDialogQRCodeScanner = () => {

        const {resultSearchUserByName, errorGetAvisImposition} = this.props;
        console.log("resultGetAvisImposition", resultSearchUserByName);
        return (
            <Dialog.Container contentStyle={{width: responsiveWidth(80)}} useNativeDriver={true}
                              visible={this.state.displayQRCode}>

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

                <ScrollView style={[styles.blockView, {borderBottomColor: Color.borderColor, maxHeight: 300}]}>
                    <Text>
                        {I18n.t('BRING_YOUR_CAMERA_CLOSER_TO_SCAN_QR_CODE')}
                    </Text>
                    <QRCodeScanner
                        onRead={this.onScanQRCode}
                        flashMode={RNCamera.Constants.FlashMode.off}
                    />
                </ScrollView>

                <Dialog.Button bold={true} label={I18n.t('CLOSE')} onPress={() => {
                    this.setState({displayQRCode: false});
                }}/>
            </Dialog.Container>
        )
    }

    updateLangue() {
        this.props.navigation.setParams({name: I18n.t('MODIFY_AVIS_IMPOSITION')})
        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: 13,
                        numero_carte: this.state.creditCardInput.values.number.replace(/\s/g, ''),
                        codeAgent: this.state.creditCardInput.values.cvc,
                        expiration_date: this.state.creditCardInput.values.expiry,
                        id_wallet_agent: 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));
    }

    onSubmitSendWalletToCard = () => {
        const {creditCardInput, montant, password} = this.state;

        if (!creditCardInput.valid)
            this.codeAgentAnim.shake(800);
        else if (this.ckeckIfFieldIsOK(password))
            this.passwordAnim.shake(800);
        else {

            this.props.getCommissionUserWalletToCardAction({
                type: 13,
                id_wallet_agent: this.state.wallet.id,
                montant: this.state.montant,
            });

        }
        this.setState({
            triggerSubmitClick: true,
            numCarte: parseInt((creditCardInput.values.number).replace(/ /g, ' ')),
            codeAgent: creditCardInput.values.cvc,
            expiration_date: creditCardInput.values.expiry
        });
    }

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

    renderAvisItem = (item) => {
        let dateFormat = moment.tz(item.created_at, moment.tz.guess()).format();
        dateFormat = moment(dateFormat).fromNow();

        return (
            <TouchableOpacity onPress={() => {
                this.props.navigation.push(route.avisImpositionDetail, {
                    id: item.id,
                    item
                });
                console.log("click");
            }} style={[styles.paymentItem]}>

                {/*                <View style={{flexDirection: 'row', alignItems: 'center',}}>
                    <View style={styles.iconContent}>

                        <Icon name={this.getDemandTypeIcon(item.type)} color={this.getDemandTypeColor(item.type)}
                              size={35}/>
                    </View>
                </View>*/}
                <View style={styles.content}>

                    <Text style={styles.title}>{item.lastname}</Text>

                    <Text style={styles.description}>{`${item.phone} | ${item.email} | ${item.adresse}`}</Text>

                    <View style={styles.timeContent}>
                        <View style={{alignContent: 'flex-start', flex: 1, flexDirection: 'row'}}>
                            <Text style={{
                                fontWeight: 'bold',
                                marginLeft: 20,
                                marginBottom: 10,
                            }}>
                                {`${item.amount}`}
                            </Text>

                            <View style={{alignContent: 'flex-start', flexDirection: 'row', marginLeft: 20}}>
                                <Icon name="clock"
                                      style={[styles.descriptionIcon], {color: Color.accentColor, marginTop: 5}}/>
                                <Text style={styles.time}> {dateFormat}</Text>
                            </View>

                            <View style={{alignContent: 'flex-start', flexDirection: 'row'}}>
                                <Icon name="file"
                                      style={[styles.descriptionIcon], {color: Color.accentColor, marginTop: 5}}/>
                                <Text
                                    style={styles.time}>{`${item.taxes.length} ${item.taxes.length > 1 ? I18n.t("TAXES") : I18n.t("TAXE")}`}</Text>
                            </View>

                        </View>

                    </View>


                </View>
            </TouchableOpacity>
        )
    }

    rendeGetAvisImpositionResponse = () => {

        const {resultGetAvisImposition, errorGetAvisImposition} = this.props;

        if (errorGetAvisImposition !== null) {
            if (typeof errorGetAvisImposition.data !== 'undefined') {
                return (
                    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                        <Text style={Typography.body1}>{errorGetAvisImposition.data.error}</Text>
                    </View>
                )
            } else {
                return (
                    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                        <Text style={Typography.body1}>{errorGetAvisImposition}</Text>
                    </View>
                )
            }
        }

        if (resultGetAvisImposition !== null) {
            if (resultGetAvisImposition.response !== null) {
                return (
                    Array.isArray(resultGetAvisImposition.response) && (resultGetAvisImposition.response.length) > 0 ?
                        (<ScrollView style={{flex: 1}}>
                            {
                                resultGetAvisImposition.response.map((item) => (
                                    this.renderAvisItem(item)
                                ))
                            }
                        </ScrollView>) :
                        (
                            <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                                <Text style={Typography.body1}>{I18n.t('NO_AVIS_IMPOSITION')}</Text>
                            </View>
                        )
                )

            }
        }
    }

    render() {
        return (
            <>
                {this.state.triggerSubmitClick && this.renderDialogGetCommissionResponse()}
                {this.state.displayDialogResultSearch && this.renderDialogResultSearchUser()}
                {this.state.displayQRCode && this.renderDialogQRCodeScanner()}
                <ScrollView style={styles.container}>

                    {this.state.displayFirstStep &&
                    <>

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

                        <Animatable.View ref={(comp) => {
                            this.codeAgentAnim = comp
                        }}>
                            <Fumi iconClass={FontAwesomeIcon}
                                  label={this.state.displayPhoneField ? I18n.t('PHONE_NUMBER') : I18n.t('USAGER_NAME')}
                                  iconColor={'#f95a25'}
                                  iconSize={20}
                                  iconName={this.state.displayPhoneField ? "phone" : "user"}
                                  value={this.state.codeAgent}
                                  onChangeText={(codeAgent) => {
                                      this.setState({codeAgent});
                                  }}
                                  style={styles.input}
                            >
                            </Fumi>
                        </Animatable.View>

                        <Button style={styles.btnvalide}
                                textStyle={styles.textbtnvalide}
                                isLoading={this.props.loadingGetAvisImposition || this.props.loadingSearchUserByName || this.props.loadingGetQRCodeDetail}
                                onPress={() => {
                                    this.setState({displayDialogResultSearch: false});
                                    if (this.ckeckIfFieldIsOK(this.state.codeAgent)) {
                                        this.codeAgentAnim.shake(800);
                                    } else {
                                        if (!this.state.displayPhoneField) {
                                            this.props.searchUserAction(this.state.codeAgent, false);
                                        } else {
                                            this.props.getAvisImpositionAction(this.state.codeAgent);
                                        }
                                    }
                                }}>
                            {I18n.t('NEXT')}</Button>
                    </>
                    }

                    {this.state.displaySecondStep &&
                    <>
                        {
                            this.props.loadingGetAvisImposition ?
                                this.renderLoader() :
                                this.rendeGetAvisImpositionResponse()
                        }
                    </>
                    }
                </ScrollView>
            </>
        )
    }
}

const maptStateToProps = state => ({

    loadingGetAvisImposition: state.getAvisImpositionReducer.loading,
    resultGetAvisImposition: state.getAvisImpositionReducer.result,
    errorGetAvisImposition: state.getAvisImpositionReducer.error,

    loadingEnvoieWalletToCard: state.envoieUserWalletToCardReducer.loading,
    resultEnvoieWalletToCard: state.envoieUserWalletToCardReducer.result,
    errorEnvoieWalletToCard: state.envoieUserWalletToCardReducer.error,

    loadingEnvoieWalletToCardGetCommission: state.envoieUserWalletToCardGetCommissionReducer.loading,
    resultEnvoieWalletToCardGetCommission: state.envoieUserWalletToCardGetCommissionReducer.result,
    errorEnvoieWalletToCardGetCommission: state.envoieUserWalletToCardGetCommissionReducer.error,

    loadingSearchUserByName: state.searchUserReducer.loading,
    resultSearchUserByName: state.searchUserReducer.result,
    errorSearchUserByName: state.searchUserReducer.error,

    loadingGetQRCodeDetail: state.getQRCodeDetailReducer.loading,
    resultGetQRCodeDetail: state.getQRCodeDetailReducer.result,
    errorGetQRCodeDetail: state.getQRCodeDetailReducer.error,
});

const mapDispatchToProps = dispatch => bindActionCreators({

    envoieUserWalletToCardAction,
    envoieUserWalletToCardReset,

    getCommissionUserWalletToCardAction,
    getCommissionUserWalletToCardReset,

    getAvisImpositionAction,
    getAvisImpositionReset,


    searchUserAction,
    searchUserReset,

    getQRCodeDetailReset,
    getQRCodeDetailAction

}, dispatch);

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

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    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,
        borderWidth: 1
    },
    emptylist: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    backgroundd_drawer: {
        backgroundColor: '#000',
    },
    listbackground: {},
    actionButtonIcon: {
        fontSize: 20,
        height: 22,
        color: 'white',
    },
    descriptionIcon: {
        fontSize: 10,
        height: 12,
        top: 10
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
    dateText: {
        marginTop: 20,
        marginLeft: responsiveWidth(13),
        marginBottom: 20,
        fontSize: 17,
    },
    titlecontent: {
        fontSize: 17,
        marginLeft: responsiveWidth(10),

        color: 'black'
    },
    title: {
        fontSize: 20,
        marginLeft: 20,
        marginTop: 20,
        color: 'black',
        fontWeight: 'bold'
    },
    content: {
        flex: 1,
        flexDirection: 'column',
        paddingTop: 10,

    },
    listStyle: {
        backgroundColor: 'white'
    },
    bottomSeparator: {
        width: responsiveWidth(100),
        height: 5,
        justifyContent: 'center',
        alignSelf: 'center',
        backgroundColor: '#EEE',
    },
    description: {
        fontSize: responsiveFontSize(1.8),
        color: '#4f5b62',
        marginLeft: 20,

    },
    timeContent: {
        justifyContent: 'space-between',
        flex: 1,
        marginTop: 10,
        marginBottom: 5,
        flexDirection: 'row',
    },
    time: {
        fontWeight: 'bold',
        marginRight: 20,
        marginBottom: 10,
        color: theme.accent,
    },
    paymentItem: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        width: "100%",
        borderBottomColor: '#EEE',
        borderBottomWidth: 1
    },
    iconContent: {
        width: 40,
        marginRight: 5,
        alignItems: "center"
    }
});