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 {accent, primary, primaryDark, purpleLight} from '../../../utils/theme.json';
import thousands from 'thousands';
import {Color} from '../../../config/Color';
import {FontWeight, Typography} from '../../../config/typography';
import {store} from "../../../redux/store";
import {IlinkEmitter} from '../../../utils/events';
import {LiteCreditCardInput} from "react-native-credit-card-input";
import {readUser} from '../../../webservice/AuthApi';
import {
    envoieUserWalletToCardAction,
    envoieUserWalletToCardReset,
    getCommissionUserWalletToCardAction,
    getCommissionUserWalletToCardReset
} from '../../../webservice/EnvoieUserApi';
import {isNormalInteger} from '../../../utils/UtilsFunction';
import {
    getAvisImpositionAction,
    getAvisImpositionReset,
    getOrdreRecetteAction,
    getOrdreRecetteDetailAction,
    getOrdreRecetteReset,
    getOrdreRecetteWithoutQuitanceAction, getQRCodeDetailAction,
    getQRCodeDetailReset,
    getQuitanceAction,
    searchUserAction,
    searchUserReset
} from "../../../webservice/regisseur/WalletRegisseurApi";
import moment from "moment-timezone";
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import ActionButton from "react-native-action-button";
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 NumeroQuitance extends Component {

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

    };

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

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

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

        readUser().then((user) => {
            if (user) {
                if (user !== undefined) {
                    if (this.state.isAgentGeolocated) {
                        this.props.getOrdreRecetteWithoutQuitanceAction(user.phone, 0);
                        this.setState({user, codeAgent: user.phone, triggerClick: true});
                    }
                }
            }
        });

        this.willFocus = this.props.navigation.addListener(
            'willFocus',
            payload => {
                this.props.getAvisImpositionReset();
                this.props.getOrdreRecetteReset();

                this.setState({
                    displayFirstStep: true,
                    displaySecondStep: false
                });
            });
    }

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

    }

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

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

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

    printOptions() {
        return (<ActionButton buttonColor={accent}>
            <ActionButton.Item buttonColor={purpleLight} title={I18n.t('SAVE_HISTORY')} onPress={() => {

            }}>
                <Icon name="save" style={styles.actionButtonIcon}/>
            </ActionButton.Item>
        </ActionButton>);
    }

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

    renderLoader = () => {
        return (
            <ProgressDialog
                visible={this.props.loadingGetAvisImposition}
                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.navigate(route.numeroQuitanceDetail, {
                    id: item.id,
                    item,
                    isModify: this.state.isModify,
                    codeAgent: this.state.codeAgent
                });
                console.log("click");
            }} style={[styles.paymentItem]}>

                <View style={styles.content}>

                    <Text style={styles.title}>{item.id_receipt}</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>

                    </View>
                </View>
            </TouchableOpacity>
        )
    }

    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
                                    }, () => {
                                        if (this.state.isModify)
                                            this.props.getQuitanceAction(this.state.codeAgent);
                                        else
                                            this.props.getOrdreRecetteWithoutQuitanceAction(this.state.codeAgent, 0);
                                    });
                                }} 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>
        )
    }

    rendeGetAvisImpositionResponse = () => {

        const {resultGetAvisImposition, errorGetAvisImposition} = this.props;

        if (resultGetAvisImposition !== null) {
            if (!isNil(resultGetAvisImposition.status === 200)) {
                if (resultGetAvisImposition.response.length === 0 && !this.state.isModify) {
                    Alert.alert(
                        I18n.t("ERROR_LABLE"),
                        I18n.t('NO_ORDRE_RECETTE_WITH_QUITANCE'),
                        [
                            {
                                text: I18n.t("OK"), onPress: () => {
                                    this.props.getAvisImpositionReset();
                                    this.props.getOrdreRecetteReset();
                                }
                            }
                        ],
                        {cancelable: false}
                    )
                } else {
                    if (!this.state.isModify) {
                        console.log("Condition 2 verifié");
                        this.props.navigation.push(route.numeroQuitanceDetail, {
                            items: resultGetAvisImposition.response,
                            isModify: this.state.isModify,
                            codeAgent: this.state.codeAgent
                        });

                        return null
                    } else {
                        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_ORDRE_RECETTE')}</Text>
                                    </View>
                                )
                        )
                    }
                }

            }
        }
    }

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

                        {/* <Text style={styles.subbigtitle}>{I18n.t('QUITANCE')}</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 {
                                            if (this.state.isModify)
                                                this.props.getQuitanceAction(this.state.codeAgent);
                                            else
                                                this.props.getOrdreRecetteWithoutQuitanceAction(this.state.codeAgent, 0);
                                        }

                                    }
                                    this.setState({triggerClick: true})
                                }}>
                            {I18n.t('NEXT')}</Button>
                    </>
                    }

                    {this.state.triggerClick &&
                    <>
                        {
                            this.props.loadingGetAvisImposition ?
                                null :
                                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,

    getOrdreRecetteWithoutQuitanceAction,
    getQuitanceAction,

    getOrdreRecetteAction,

    getOrdreRecetteDetailAction,
    getOrdreRecetteReset,

    searchUserAction,
    searchUserReset,

    getQRCodeDetailReset,
    getQRCodeDetailAction

}, dispatch);

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

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