import React, {Component} from 'react';
import {
    ActivityIndicator,
    Image,
    Platform,
    ProgressBarAndroid,
    ScrollView,
    StatusBar,
    StyleSheet,
    Text,
    TouchableOpacity,
    View
} from 'react-native';
import I18n from 'react-native-i18n';
import {Appbar, Provider} from 'react-native-paper';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {Color} from '../../config/Color';
import {Typography} from '../../config/typography';
import * as Utils from '../../utils/DeviceUtils';
import {IlinkEmitter} from "../../utils/events";
import {connect} from "react-redux";
import {bindActionCreators} from "redux";
import {getBankListAction, getBankListReset} from "../../webservice/BankApi";
import {getOperatorListAction, getOperatorListReset} from "../../webservice/WalletApi";
import {store} from "../../redux/store";

const route = require('../../route.json');
let slugify = require('slugify');

class SouscrireAssuranceUser extends Component {

    constructor(props) {
        super(props);
        IlinkEmitter.on("langueChange", this.updateLangue.bind(this));

        this.state = {
            options: this.props.navigation.state.params.optionSelect,
            wallet: store.getState().walletDetailReducer.result.response
        }
        console.log("OPERATEUR OPTION PROPS", this.props);
        console.log("OPERATEUR OPTION STATE", this.state);


    }

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

    static navigationOptions = ({navigation}) => ({
        header: null,
        headerMode: 'none',
        headerTitle: null,
        activeColor: '#f0edf6',
        inactiveColor: '#3e2465',
        barStyle: {backgroundColor: '#694fad'},
        drawerLabel: I18n.t('INSURANCE_LIST'),
        drawerIcon: ({tintColor}) => (
            <Icon
                name={'credit-card'}
                size={24}
            />)
    });

    redirectToRoute = (item) => {

        /*        console.log("Item selected", item);
                if (this.state.options.length > 0) {

                    this.props.navigation.push(this.state.options[0].screen, {
                        title: item.operator_name,
                        type: this.state.options[0].type,
                        operator_id: item.id_operator,
                        typeOperator: this.state.operatorType
                    });
                } else {
                    if (this.state.user.category === 'geolocated')
                        this.props.navigation.navigate(route.envoieWalletToBankAgent, {bank: item});
                    else
                        this.props.navigation.navigate(route.envoieWalletToBankUser, {bank: item});
                }
                */
    }

    renderLoader = () => {
        return (
            <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>
        )
    }

    renderItem = (item, index) => {
        return (

            <TouchableOpacity
                key={index}
                style={[styles.paymentItem, {borderBottomColor: Color.borderColor}]}
                onPress={() => {
                    this.redirectToRoute(item);
                }}>
                <View style={{flexDirection: 'row', alignItems: 'center'}}>
                    <View>
                        <Text style={Typography.body1}>{item.title}</Text>
                        <Text style={[Typography.footnote, Color.grayColor]} style={{marginTop: 5}}>
                            {I18n.t('AMOUNT')}: {`${item.amount}`}
                        </Text>
                    </View>
                </View>
            </TouchableOpacity>
        )
    }

    renderBankList = () => {

        const {result, error} = this.props;
        const {options} = this.state;

        return (
            Array.isArray(options) && (options.length) > 0 ?
                (<ScrollView style={{flex: 1, padding: 20}}>
                    {
                        options.map((item, index) => (
                            this.renderItem(item, index)
                        ))
                    }
                </ScrollView>) :
                (
                    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                        <Text style={Typography.body1}>{I18n.t('NO_OPERATOR_AVAILABLE')}</Text>
                    </View>
                )
        )

    }

    renderItemElement = (item, index) => {

        return (
            <TouchableOpacity
                key={index}
                style={[styles.paymentItem, {borderBottomColor: Color.borderColor}]}
                onPress={() => {
                    this.props.navigation.navigate(item.screen, {
                        type: item.type,
                        title: item.title
                    })
                }}>

                <View style={{flexDirection: 'row', alignItems: 'center'}}>
                    <View style={styles.iconContent}>
                        <Image style={{width: 48, height: 48}} source={{uri: item.icon}}/>
                    </View>
                    <View>
                        <Text style={Typography.body1}>{item.title}</Text>
                        <Text style={Typography.footnote}>{item.title}</Text>
                    </View>
                </View>

            </TouchableOpacity>
        )
    }

    renderList = () => {

        const {options} = this.state;

        return (
            <ScrollView style={{flex: 1, padding: 20}}>
                {
                    options.map((item, index) => (
                        this.renderItem(item, index)
                    ))
                }
            </ScrollView>
        );
    }


    render() {
        console.log("OPERATEUR OPTION STATE", this.state.options.length);
        return (
            <Provider>
                <View style={{flex: 1}}>

                    <StatusBar
                        backgroundColor={Color.primaryDarkColor}
                        barStyle="light-content"
                        translucent={false}
                    />

                    <Appbar.Header dark={true} style={{backgroundColor: Color.primaryColor}}>
                        <Appbar.BackAction
                            onPress={() => {
                                this.props.navigation.pop()
                            }}
                        />
                        <Appbar.Content
                            title={I18n.t("INSURANCE_LIST")}
                            subtitle={I18n.t("CHOOSE_OPTION")}
                        />
                    </Appbar.Header>

                    <View style={styles.container}>

                        {
                            this.renderBankList()
                        }

                    </View>

                </View>
            </Provider>
        );
    }
}

const mapStateToProps = state => ({
    loading: state.getListOperatorReducer.loading,
    result: state.getListOperatorReducer.result,
    error: state.getListOperatorReducer.error,
});

const mapDispatchToProps = dispatch => bindActionCreators({
    getBankListAction,
    getBankListReset,
    getOperatorListAction,
    getOperatorListReset,
}, dispatch);

export default connect(mapStateToProps, mapDispatchToProps)(SouscrireAssuranceUser);

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    paymentItem: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        borderBottomWidth: 1,
        paddingVertical: 5,
        width: "100%",
        marginBottom: 15
    },
    iconContent: {
        width: 60,
        marginRight: 10,
        alignItems: "center"
    },
    item: {
        paddingVertical: 15,
        borderBottomWidth: 1,
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center"
    },
    /*      item: {
              paddingVertical: 15,
              borderBottomWidth: 1,
              flexDirection: "row",
              justifyContent: "space-between",
              alignItems: "center"
         }, */
    lottie: {
        width: 540,
        height: 240
    },
    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(60),
        paddingHorizontal: 10,
        justifyContent: 'space-between',
        alignItems: 'flex-start',
        flex: 1,
    },
    contentTitle: {
        paddingTop: 12,
    }

});