import React, {Component} from 'react'
import {Alert, Platform, ProgressBarAndroid, ScrollView, StyleSheet, Text, TouchableOpacity, View} from 'react-native'
import Button from 'apsl-react-native-button'
import {responsiveHeight, responsiveWidth} from 'react-native-responsive-dimensions'
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import {readUser} from "../../../webservice/AuthApi";
import I18n from "react-native-i18n";
import {creditDemandResetReducer, treatCreditDemand} from '../../../webservice/CreditTreatDemandApi';
import {creditCancelResetReducer, treatCancelDemand} from '../../../webservice/CreditCancelDemandeApi';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import Toast from 'react-native-root-toast';
import {Color} from '../../../config/Color'
import isNil from 'lodash/isNil';
import isEqual from 'lodash/isEqual';
import _ from "lodash";
import {getNanoCreditUniqueDemandsAction, getNanoCreditUniqueDemandsReset} from '../../../webservice/user/NanoCreditApi'
import {cancelDemandGroupAction, treatDemandGroupAction, treatDemandGroupReset} from '../../../webservice/NanoCreditApi'
import * as Animatable from "react-native-animatable";
import {Dropdown} from "react-native-material-dropdown-v2";
import {Fumi} from "react-native-textinput-effects";
import FontAwesomeIcon from "react-native-vector-icons/FontAwesome";
import {modifyAvisImpositionReset, modifyvisImpositionAction} from "../../../webservice/regisseur/WalletRegisseurApi";

let typesta = 0
let moment = require('moment-timezone')
var colorback = 'white'

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

const route = require("../../../route.json");

class AvisImpositionDetail extends Component {

    static navigatorStyle = {
        navBarBackgroundColor: theme.accentLight,
        statusBarColor: theme.accent,
        navBarTextColor: '#FFFFFF',
        navBarButtonColor: '#FFFFFF',
    };

    static navigationOptions = ({navigation}) => {
        return {
            drawerLabel: () => null,
            title: I18n.t('AVIS_IMPOSITION') + ' N°' + navigation.getParam("item", "-").id_tax_notice,
            headerTintColor: 'white',
            headerStyle: {
                backgroundColor: Color.primaryColor,
                marginTop: 20,
                color: 'white'
            },
            headerTitleStyle: {
                color: "white"
            },
        }
    };

    constructor(props) {
        super(props);

        this.state = {
            displayAmountModifyDialog: false,
            /* statut: sta, */
            user: null,
            networks: [],
            loadingTreat: false,
            loadingCancel: false,
            triggerTreatmentClick: false,
            triggerCancelClick: false,
            color: colorback,
            montant: null,
            isBtnModifyAmountEnabled: false,
            id: this.props.navigation.getParam("id", null),
            item: this.props.navigation.getParam("item", null),
            tabTaxe: [0],
            taxes_selected: [],
            taxes: [],
            isTaxesLoaded: false,
            password: null,
            assign_network: false
        };
        console.log("STATE", this.state);
        this.currentLocale = I18n.locale.includes("fr") ? "fr" : "en-gb";
        this.props.modifyAvisImpositionReset();
        moment.locale(this.currentLocale);

    }

    componentDidMount() {

        if (!this.state.isTaxesLoaded) {
            let taxesTemp = new Array();
            this.state.item.taxes.map((taxes, index) => {
                taxesTemp.push(taxes);
            });
            this.setState({
                taxes: taxesTemp,
                isTaxesLoaded: true
            });
        }

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

    }

    displayToast = (message) => {
        Toast.show(message, {
            duration: Toast.durations.LONG,
            position: Toast.positions.BOTTOM,
            backgroundColor: Color.primaryColor,
            shadow: true,
            animation: true,
            hideOnPress: true,
            delay: 0,
            onShow: () => {
                // calls on toast\`s appear animation start
            },
            onShown: () => {
                // calls on toast\`s appear animation end.
            },
            onHide: () => {
                // calls on toast\`s hide animation start.
            },
            onHidden: () => {
                // calls on toast\`s hide animation end.
            }
        });
    }

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

    renderModifyResponse = () => {
        const {errorModifyAvis, resultModifyAvis, resultCancelDemand, errorCancelDemand} = this.props;

        if (errorModifyAvis !== null) {
            if (typeof errorModifyAvis.data !== 'undefined') {
                Alert.alert(
                    I18n.t("ERROR_TREATMENT_DEMAND"),
                    errorModifyAvis.data.error,
                    [
                        {
                            text: I18n.t("OK"), onPress: () => {
                                this.props.modifyAvisImpositionReset();
                            }
                        }
                    ],
                    {cancelable: false}
                );
            }
        }

        if (resultModifyAvis !== null) {
            console.log("resultModifyAvis", resultModifyAvis);
            if (resultModifyAvis.status === 200) {
                Alert.alert(
                    I18n.t("SUCCESS"),
                    I18n.t("AVIS_MODIFY_SUCCESS"),
                    [
                        {
                            text: I18n.t("OK"), onPress: () => {
                                this.props.navigation.goBack();
                                this.props.modifyAvisImpositionReset();
                            }
                        }
                    ],
                    {cancelable: false}
                );
            }
        }

    }

    renderLabelState = (state) => {
        if (state === 0)
            return I18n.t('NO_TREAT')
        else if (state === 1)
            return I18n.t('TREAT')
        else
            return I18n.t('REFUSED')
    }

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


    renderTaxesDropdown = (item, index) => {
        return (
            <>
                <Animatable.View key={index}>
                    <View
                        style={{
                            flexDirection: "row",
                            paddingRight: 20,
                            paddingLeft: 20,
                        }}>

                        <View style={{
                            width: responsiveWidth(87),
                            borderRadius: 10,
                            alignSelf: "center",
                            backgroundColor: 'white'
                        }}>
                            <Dropdown
                                label={I18n.t('TAXES')}
                                disabled={true}
                                data={[]}
                                useNativeDriver={true}
                                valueExtractor={(value) => {
                                    return value
                                }}
                                value={item.name}
                                labelExtractor={(value) => {
                                    return value.name
                                }}
                            />
                        </View>
                        {
                            item.required_tax === 0 && this.state.item.is_company === 0 &&
                            <View>
                                <TouchableOpacity
                                    style={[styles.contain], {
                                        backgroundColor: Color.accentColor,
                                        alignItems: "center",
                                        justifyContent: "center",
                                        position: "absolute",
                                        width: 25,
                                        bottom: 0,
                                        zIndex: 10,
                                        left: -10,
                                        height: 25,
                                        borderRadius: 11}}
                                    onPress={() => {
                                        Alert.alert(
                                            I18n.t("TITLE_SUPPRESS_CONFIRM"),
                                            I18n.t("TEXT_SUPPRESS_CONFIRM_TAXE"),
                                            [
                                                {
                                                    text: I18n.t("SUBMIT_LABEL"), onPress: () => {
                                                        let itemState = this.state.item;
                                                        let taxes = _.pull(itemState.taxes, item);
                                                        let taxesState = _.pull(this.state.taxes, item);

                                                        itemState.taxes = taxes;
                                                        this.setState({
                                                            item: itemState,
                                                            taxes: taxesState
                                                        });
                                                    }
                                                },
                                                {
                                                    text: I18n.t("CANCEL_LABEL")
                                                }
                                            ],
                                            {cancelable: false}
                                        );

                                    }}
                                    activeOpacity={0.9}>
                                    <View>
                                        <View>
                                            <Icon name={'minus'} color={Color.whiteColor} size={20}/>
                                        </View>
                                    </View>
                                </TouchableOpacity>
                            </View>

                        }

                    </View>
                </Animatable.View>
                {
                    item.measurement_unit !== "forfait" &&
                    <>
                        <Animatable.View>
                            <Fumi iconClass={FontAwesomeIcon}
                                  iconName={'check-circle'}
                                  label={item.labels[0]}
                                  iconColor={'#f95a25'}
                                  keyboardType="decimal-pad"
                                  iconSize={20}
                                  style={styles.input}
                                  value={item.tax_units_count}
                                  onChangeText={(value) => {
                                      let tax_units_count = this.state.taxes;
                                      tax_units_count[index].tax_units_count = value;
                                      this.setState({taxes: tax_units_count});
                                  }}
                            >
                            </Fumi>
                        </Animatable.View>

                        {
                            item.labels.length === 2 &&
                            <Animatable.View>
                                <Fumi iconClass={FontAwesomeIcon}
                                      iconName={'check'}
                                      label={isNil(item.labels[1]) ? I18n.t('UNIT_PER_TAXE_UNIT_COUNT') : item.labels[1]}
                                      iconColor={'#f95a25'}
                                      keyboardType="decimal-pad"
                                      iconSize={20}
                                      value={item.units_per_tax_unit_count}
                                      style={styles.input}
                                      onChangeText={(value) => {
                                          let units_per_tax_unit_count = this.state.taxes;
                                          units_per_tax_unit_count[index].units_per_tax_unit_count = value;
                                          this.setState({taxes: units_per_tax_unit_count});
                                      }}
                                >
                                </Fumi>
                            </Animatable.View>
                        }
                    </>

                }

                {
                    item.billing_period === 'jour' &&
                    (<Animatable.View>
                        <Fumi iconClass={FontAwesomeIcon} iconName={'calendar'}
                              label={I18n.t('NUMBER_OF_DAYS')}
                              iconColor={'#f95a25'}
                              value={'' + item.number_of_days}
                              iconSize={20}
                              keyboardType='numeric'
                              onChangeText={(value) => {
                                  let units_per_tax_unit_count = this.state.taxes;
                                  units_per_tax_unit_count[index].number_of_days = value;
                                  this.setState({taxes: units_per_tax_unit_count});
                              }}
                              style={styles.input}
                        >
                        </Fumi>
                    </Animatable.View>)
                }
            </>
        )
    }

    renderDetail = () => {

        const {resultGetUniqueDemand} = this.props;
        const {item} = this.state;
        let created_at = moment.tz(item.created_at, moment.tz.guess()).format();
        let updated_at = moment.tz(item.updated_at, moment.tz.guess()).format();
        created_at = moment(created_at);
        updated_at = moment(updated_at);

        return (<ScrollView style={styles.container}>
            <View
                style={styles.cardcontainer}
            >
                <Text style={{
                    fontSize: 17,
                    fontWeight: 'bold',
                    color: 'black',
                    marginLeft: responsiveWidth(5)
                }}>
                    {I18n.t('AGENT_INFORMATION')}
                </Text>
                <View style={{
                    flexDirection: 'row',
                    justifyContent: 'flex-start'
                }}>
                    <Icon name='account'
                          size={28}
                          color={theme.accent}
                          style={{
                              marginLeft: 20
                          }}
                    />
                    <Text style={[styles.simpleuser,styles.multiLine]}>{`${item.lastname} | ${item.email}`}</Text>
                </View>
                <View style={{
                    flexDirection: 'row',
                    justifyContent: 'flex-start'
                }}>
                    <Icon name='email'
                          size={28}
                          color={theme.accent}
                          style={{
                              marginLeft: 20
                          }}
                    />
                    <Text style={[styles.simpleuser,styles.multiLine]}>{`${item.email} | ${item.phone}`}</Text>
                </View>
                <View style={{
                    flexDirection: 'row',
                    justifyContent: 'flex-start'
                }}>
                    <Icon name='map-marker'
                          size={28}
                          color={theme.accent}
                          style={{
                              marginLeft: 20
                          }}
                    />
                    <Text style={[styles.simpleuser,styles.multiLine]}>{`${item.adresse}`}</Text>
                </View>

                {/*                <View style={{
                    flexDirection: 'row',
                    justifyContent: 'flex-start'
                }}>
                    <Icon name='code-braces'
                          size={28}
                          color={theme.accent}
                          style={{
                              marginLeft: 20
                          }}
                    />
                    <Text
                        style={styles.simpleuser}>{`${I18n.t('CODE_PARRAIN')}: ${item.code_parrain}`}</Text>
                </View>*/}

            </View>

            <View
                style={styles.cardcontainer}
            >
                <Text style={{
                    fontSize: 17,
                    fontWeight: 'bold',
                    color: 'black',
                    marginLeft: responsiveWidth(5)
                }}>
                    {I18n.t('TAXES')}
                </Text>
                <View style={{
                    flexDirection: 'row',
                    justifyContent: 'flex-start'
                }}>
                    <Icon name="cash"
                          size={28}
                          color={theme.accent}
                          style={{
                              marginLeft: 20
                          }}
                    />
                    <Text
                        style={[styles.simpleuser,styles.multiLine]}>{`${this.state.item.amount}`}</Text>
                </View>

                <View style={{
                    flexDirection: 'row',
                    justifyContent: 'flex-start'
                }}>
                    <Icon name='calendar'
                          size={28}
                          color={theme.accent}
                          style={{
                              marginLeft: 20
                          }}
                    />
                    <Text
                        style={[styles.simpleuser,styles.multiLine]}>{`${I18n.t('CREATION_DATE')}: ${created_at.format(" Do MMMM YYYY à HH:mm")}`}</Text>
                </View>

                <View style={{
                    flexDirection: 'row',
                    justifyContent: 'flex-start'
                }}>
                    <Icon name='calendar'
                          size={28}
                          color={theme.accent}
                          style={{
                              marginLeft: 20
                          }}
                    />
                    <Text
                        style={[styles.simpleuser,styles.multiLine]}>{`${I18n.t('UPDATE_DATE')}: ${updated_at.format(" Do MMMM YYYY à HH:mm")}`}</Text>
                </View>

                <View style={{
                    flex: 1,
                    flexDirection: 'row',
                    justifyContent: 'flex-start'
                }}>

                </View>
            </View>
            {
                item.taxes.map((element, index) => (
                    this.renderTaxesDropdown(element, index)
                ))
            }
            <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>

            <View style={{
                flexDirection: 'column',
                paddingTop: 10,
                paddingHorizontal:12
            }}>
                <View style={{
                    flex: 1,
                    alignItems: 'center'
                }}>
                    <Button
                        style={{
                            borderColor: 'transparent',
                            borderRadius: 6,
                            marginLeft: 5,
                            marginRight: 5,
                            backgroundColor: 'green'
                        }}
                        isLoading={this.props.loadingModifyAvis}
                        onPress={() => {
                            this.onSubmitModificationAvisImposition()
                        }}
                        disabled={true}
                        textStyle={styles.textbtnstyle}
                    >
                        {I18n.t('SAVE')}
                    </Button>
                </View>

                {
                    this.state.item.is_company === 0 &&
                    <View style={{
                        flex: 1,
                        alignItems: 'center'
                    }}>
                        <Button
                            style={{
                                borderColor: 'transparent',
                                borderRadius: 6,
                                marginLeft: 5,
                                marginRight: 5,
                                backgroundColor: Color.primaryColor
                            }}
                            isLoading={false}
                            onPress={() => {
                                this.props.navigation.push(route.addNetwork, {
                                    item: this.state.item
                                })
                            }}
                            textStyle={[styles.textbtnstyle, styles.textbtnPadding]}
                        >
                            {I18n.t('ADD_NETWORK')}
                        </Button>
                    </View>
                }

                
            </View>


        </ScrollView>);
    }

    onSubmitModificationAvisImposition = () => {
        const {password, item, taxes, assign_network} = this.state;
        if (this.ckeckIfFieldIsOK(password)) {
            this.passwordAnim.shake(200);
        } else {
            let dataToSubmit = {
                id_agent: parseInt(this.state.user.agentId),
                password: password,
                id_tax_notice: item.id,
                taxes: taxes,
                assign_network: false
            }
            this.props.modifyvisImpositionAction(dataToSubmit);
        }
    }

    render() {

        return (
            <>
                {this.renderModifyResponse()}
                {(this.state.triggerTreatmentClick || this.state.triggerCancelClick) && this.renderModifyResponse()}
                {
                    this.renderDetail()
                }
            </>
        );
    }


}

const mapStateToProps = state => ({
    loadingGetUniqueDemand: state.getUniqueDemandsGroupReducer.loading,
    resultGetUniqueDemand: state.getUniqueDemandsGroupReducer.result,
    errorGetUniqueDemand: state.getUniqueDemandsGroupReducer.error,

    loadingModifyAvis: state.modifyAvisImpositionReducer.loading,
    resultModifyAvis: state.modifyAvisImpositionReducer.result,
    errorModifyAvis: state.modifyAvisImpositionReducer.error,
});

const mapDispatchToProps = dispatch => bindActionCreators({
    getNanoCreditUniqueDemandsAction: getNanoCreditUniqueDemandsAction,
    getNanoCreditUniqueDemandsReset: getNanoCreditUniqueDemandsReset,

    treatDemandGroupAction: treatDemandGroupAction,
    cancelDemandGroupAction: cancelDemandGroupAction,
    treatDemandGroupReset: treatDemandGroupReset,

    treatCreditDemand: treatCreditDemand,
    creditDemandResetReducer: creditDemandResetReducer,

    treatCancelDemand: treatCancelDemand,
    creditCancelResetReducer: creditCancelResetReducer,

    modifyvisImpositionAction,
    modifyAvisImpositionReset
}, dispatch);

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

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    btnstyle: {},

    inputAmountText: {
        ...Platform.select({
            android: {
                borderBottomColor: Color.borderColor,
                borderBottomWidth: 0.5,
            }
        })
    },
    simpleuser: {
        marginLeft: responsiveWidth(2),
        fontSize: 16,
        color: '#3E3E3E'
    },
    multiLine: {
        flexShrink: 1,
        flexWrap: 'wrap',
    },
    textbtnstyle: {
        color: "white",
        fontWeight: "bold",
        fontSize: 18
    },
    textbtnPadding: {
        paddingHorizontal: 4,
        textAlign: 'center',
    },
    input: {
        height: 60,
        marginTop: responsiveHeight(2),
        marginLeft: responsiveWidth(5),
        marginRight: responsiveWidth(5),
        borderRadius: 5,
        borderWidth: 1
    },
    cardcontainer1: {
        justifyContent: 'space-evenly',
        flex: 2,
        marginRight: 3,
        marginLeft: 3,

    },
    cardcontainer: {
        margin: 3,
        marginTop: 25
    },
    checkboxContainer: {
        flexDirection: "row",
        marginBottom: 20,
    },
    checkbox: {
        alignSelf: "center",
        color: "white"
    },
})