import {connect, useDispatch} from "react-redux";
import React, {useEffect, useRef, useState} from "react";
import {Card, CardAction, CardButton, CardContent} from "react-native-material-cards";
import {responsiveFontSize, responsiveHeight, responsiveWidth} from "react-native-responsive-dimensions";
import {
    ActivityIndicator,
    Alert,
    Picker,
    Platform,
    ProgressBarAndroid,
    StatusBar,
    StyleSheet,
    Text,
    View
} from "react-native";
import * as Animatable from "react-native-animatable";
import {HelperText, TextInput} from "react-native-paper";
import I18n from "react-native-i18n";
import {primary} from "../../utils/theme.json";
import {createStructuredSelector} from "reselect";
import {selectRefillAgent, selectRequestCredit} from "../../redux/credit-management/credit.selector";
import {
    fetchRefillAgent,
    fetchRefillAgentReset,
    fetchRequestCredit, fetchRequestCreditReset
} from "../../redux/credit-management/credit.actions";
import isEqual from 'lodash/isEqual';
import isNil from 'lodash/isNil';
import {readUser} from "../../webservice/AuthApi";
import {MaterialDialog} from "react-native-material-dialog";
import {fetchDepositReset} from "../../redux/actions/DepositAction";
import {Dropdown} from "react-native-material-dropdown-v2";
/**
 * @Project iLinkCity
 * @File HistoryRequesterRefillAgent.js
 * @Path screens/history-request
 * @Author BRICE ZELE
 * @Date 06/07/2022
 */

const HistoryRequesterRefillAgent = ({navigation, refillAgent,fetchRefillAgent, fetchRequestCredit, requestCredit}) => {

    const dispatch = useDispatch();
    const handleMontantRef = useRef(null)
    const handleViewRef = useRef(null)
    const refInp = useRef(null)
    const [montant, setMontant] = useState(null)
    const [receiver, setReceiver] = useState(null)
    const [receivers, setReceivers] = useState([])
    const [user, setUser] = useState(null);


    useEffect(()=> {
        fetchRefillAgent();
        dispatch(fetchRequestCreditReset());
        readUser().then((user) => {
            setUser(user);
        });
    }, [])

    useEffect(()=> {
        if(refillAgent?.result) {
            setReceiver(refillAgent?.result?.response[0]?.lastname)
            setReceivers(refillAgent?.result?.response)
        }
    }, [refillAgent])

    useEffect(()=> {
        if(requestCredit?.result) {
            Alert.alert(
                I18n.t("SUCCESS"),
                requestCredit?.result?.response,
                [
                    {
                        text: I18n.t("OK"), onPress: () => {
                            dispatch(fetchRequestCreditReset());
                        }
                    }

                ],
                { cancelable: false }
            );
        }

        if(requestCredit?.error) {
            Alert.alert(
                I18n.t("ERROR_LABLE"),
                requestCredit?.error?.error,
                [
                    {
                        text: I18n.t("OK"), onPress: () => {
                            dispatch(fetchRequestCreditReset());
                        }
                    }

                ],
                { cancelable: false }
            );
        }
    }, [requestCredit])

    const array_move = (arr, fromIndex, toIndex) => {
        var element = arr[fromIndex];
        arr.splice(fromIndex, 1);
        arr.splice(toIndex, 0, element);
    };

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

    const renderLoader = () => {
        return (
            <MaterialDialog
                visible={requestCredit.loading}
                title={I18n.t("LOADING")}>
                <View style={{ justifyContent: 'center', alignItems: 'center' }}>
                    <Text>{I18n.t("LOADING_CREDIT_TRANSFER")}</Text>
                    <ProgressBarAndroid />
                </View>
            </MaterialDialog>
        )
    }

    return (
        <View
            style={{flex: 1, alignItems: 'center', backgroundColor: "lightgrey", paddingTop: responsiveHeight(10)}}>
            {renderLoader()}
            <StatusBar
                translucent={false}
            />
            <View style={{height: 200}}>
            <Card style={{width: responsiveWidth(96), paddingTop: 20}}>
                <CardContent>
                    <View style={{flex: 1}}>

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

                            <Dropdown
                                label={I18n.t("AGENTS_RECHARGE")}
                                style={{height: 50, marginLeft: 35, width: responsiveWidth(70)}}
                                labelExtractor={(item, index) => {
                                    return item.lastname
                                }}
                                valueExtractor={(item, index) => {
                                    return item
                                }}
                                onChangeText={(value, index, data) => {
                                    console.log('itemValue', value)
                                    setReceiver(value)
                                    //setReceivers(array_move(receivers, itemIndex, 0))
                                }}
                                data={receivers}
                            />

                            <Animatable.View
                                ref={handleMontantRef}
                            >
                                <TextInput
                                    label={I18n.t('AMOUNT')}
                                    keyboardType={"numeric"}
                                    style={input.selfitem}
                                    ref={refInp}
                                    mode={"outlined"}
                                    inputStyle={input.style}
                                    onChangeText={(text) => {
                                        if(text === '')
                                            setMontant(null)
                                        else {
                                            let neb = parseInt(text)
                                            setMontant(neb)
                                        }
                                    }}
                                    value={montant}
                                />
                            </Animatable.View>

                            {/*                            <HelperText
                                type="error"
                                visible={this.state.visibleError}>
                                {I18n.t('INVALID_MONTANT')}
                            </HelperText>*/}
                        </View>

                    </View>
                </CardContent>
                <CardAction
                    separator={true}
                    inColumn={false}>
                    <CardButton
                        onPress={() => {
                            navigation.goBack()
                        }}
                        title={I18n.t('CANCEL')}
                        color="crimson"
                    />
                    <CardButton
                        onPress={() => {
                            console.log("montant", montant)
                            if(ckeckIfFieldIsOK(montant))
                                handleMontantRef.current?.shake(800);
                            else {
                                fetchRequestCredit({
                                    issuer_id: user.agentId,
                                    receiver_id: receiver.id,
                                    amount: montant
                                })
                            }
                        }}
                        title={I18n.t('SEND')}
                        color="steelblue"

                    />
                </CardAction>
            </Card>
        </View>
        </View>
    )

}

const mapStateToProps = createStructuredSelector({
    refillAgent: selectRefillAgent,
    requestCredit: selectRequestCredit
})
export default connect(mapStateToProps, {fetchRefillAgent, fetchRequestCredit})(HistoryRequesterRefillAgent);

const input = StyleSheet.create({
    selfitem: {
        width: responsiveWidth(70),
        alignSelf: 'center',
        marginBottom: 20,
    },
    label: {
        color: primary
    },
    style: {
        color: 'black'
    }
})
const styles = StyleSheet.create({
    title: {
        backgroundColor: primary,
        color: 'white',
        paddingLeft: 20,
        paddingTop: 10,
        fontWeight: 'bold',
        fontSize: responsiveFontSize(3),
        height: responsiveHeight(10),
    },
    subtitle: {
        color: 'black',
        paddingLeft: 20,
        paddingTop: 10,
        marginBottom: responsiveHeight(3),
        fontWeight: 'bold',
        fontSize: responsiveFontSize(2),
    },
    container: {
        flex: 1,
        backgroundColor: '#EEE',
        justifyContent: 'space-between',
    },

    container2: {
        flex: 1,
        height: responsiveHeight(20),
        backgroundColor: '#EEE',
    },
    btnContainer: {
        flexDirection: 'row',
        paddingRight: 5,
        paddingLeft: 5,
        paddingTop: 5,
        marginBottom: -2.5,
    },
    button_1: {
        flex: 1,
        borderColor: 'transparent',

    },
    button_2: {
        flex: 1,
        borderColor: 'transparent',
        backgroundColor: primary,
        borderRadius: 0,
    },

    button_1_text: {
        color: primary,
        fontWeight: 'bold',
    },

    button_2_text: {
        color: 'white',
        fontWeight: 'bold',
    },
    cardInput: {

        marginLeft: 10,
        marginRight: 10,
        marginTop: responsiveHeight(5),
        width: responsiveWidth(98),
        alignSelf: 'center',
        justifyContent: 'space-between',
        height: responsiveHeight(40)
    },
    cardInput2: {

        marginLeft: 10,
        marginRight: 10,
        marginTop: responsiveHeight(1),
        width: responsiveWidth(98),
        height: responsiveHeight(50),
        alignSelf: 'center',
        justifyContent: 'space-between',
    }
});