import React, {Component} from 'react'
import {
    ActivityIndicator,
    Alert, Image,
    Platform,
    ProgressBarAndroid,
    ScrollView, StatusBar,
    StyleSheet,
    Text,
    TouchableOpacity,
    View
} from 'react-native'
import Button from 'apsl-react-native-button'
import {responsiveFontSize, 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 {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 MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import Entypo from 'react-native-vector-icons/Entypo';
import BottomSheet from 'react-native-js-bottom-sheet';
import {
    deletePenalityAction, deletePenalityReset,
    modifyAvisImpositionReset,
    modifyOrdreRecetteAction, modifyPenalityAction, modifyPenalityReset, saveActifSocietyAction, saveActifSocietyReset,
    saveOrdreRecetteAction
} from "../../../webservice/regisseur/WalletRegisseurApi";
import Dialog from "react-native-dialog";
import {ProgressDialog} from "react-native-simple-dialogs";
import {IndicatorViewPager, PagerTabIndicator} from "react-native-best-viewpager";
import {store} from "../../../redux/store";
import axios from "axios";
import {getOnePenality} from "../../../webservice/IlinkConstants";
import {Appbar, Provider} from "react-native-paper";

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

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

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

class PenalityTaxeDetail extends Component {

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

    static navigationOptions = ({navigation}) => {
        return {
            drawerLabel: () => null,
            title: navigation.getParam("isModify", false) ? I18n.t('ORDRE_RECETTE') + ' N°' + navigation.getParam("item", null).id_revenue_order
                : I18n.t('AVIS_IMPOSITION') + ' N°' + navigation.getParam("item", null).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,
            royalties_fees: null,
            isBtnModifyAmountEnabled: false,
            id: this.props.navigation.getParam("id", null),
            item: this.props.navigation.getParam("item", null),
            password: null,
            isModify: this.props.navigation.getParam("isModify", false),
            assign_network: false,
            ordreRecetteId: this.props.navigation.getParam("isModify", false) ? this.props.navigation.getParam("item", null).id_revenue_order : null,
            displayDialogModifyPenalite: false,
            displayDialogDeletePenalite: false,
            tauxPenalite: null,
            penality: {},
            displayLoader: false,
            isSubmitClick: false
        };
        console.log("STATE", this.state);
        this.currentLocale = I18n.locale.includes("fr") ? "fr" : "en-gb";
        moment.locale(this.currentLocale);

        this.props.modifyPenalityReset();
        this.props.deletePenalityReset();

        this.willFocus = this.props.navigation.addListener(
            'willFocus',
            payload => {
                this.refreshScreen(this.state.item.id);
            });
    }

    componentDidMount() {

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

    checkOrShake(champ, view) {
        let res = false;
        if (champ !== undefined && champ !== null && champ.length > 0) {
            res = true;
        } else {
            view.shake(800)
        }
        return res;
    }

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

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

        if (resultModifyAvis !== null) {
            console.log("resultModifyAvis", resultModifyAvis);
            if (resultModifyAvis.status === 200) {
                if (this.state.isModify) {
                    Alert.alert(
                        I18n.t("SUCCESS"),
                        I18n.t("ORDRE_RECETTE_MODIFY_SUCCES"),
                        [
                            {
                                text: I18n.t("OK"), onPress: () => {
                                    this.props.navigation.goBack();
                                    this.props.modifyAvisImpositionReset();
                                }
                            }
                        ],
                        {cancelable: false}
                    );
                } else {
                    Alert.alert(
                        I18n.t("SUCCESS"),
                        I18n.t("ORDRE_RECETTE_SUCCES"),
                        [
                            {
                                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 (
            <ProgressDialog
                visible={this.state.displayLoader}
                title={I18n.t('LOADING')}
                message={I18n.t('LOADING_PROGRESS')}
            />
        )
    }

    renderDialogResponse = () => {
        const {resultModifyPenality, errorModifyPenality, resultDeletePenality, errorDeletePenality} = this.props;

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

        if (resultModifyPenality !== null) {
            if (resultModifyPenality.response !== null) {
                Alert.alert(
                    I18n.t("SUCCESS"),
                    resultModifyPenality.response,
                    [
                        {
                            text: I18n.t("OK"), onPress: () => {
                                this.props.modifyPenalityReset();
                                this.setState({
                                    displayLoader: false,
                                    isSubmitClick: false
                                });
                                this.refreshScreen(this.state.item.id);
                            }
                        }

                    ],
                    {cancelable: false}
                )
            }
        }

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

        if (resultDeletePenality !== null) {
            if (resultDeletePenality.response !== null) {
                Alert.alert(
                    I18n.t("SUCCESS"),
                    resultDeletePenality.response,
                    [
                        {
                            text: I18n.t("OK"), onPress: () => {
                                this.props.deletePenalityReset();
                                this.setState({
                                    displayLoader: false,
                                    isSubmitClick: false
                                });
                                this.refreshScreen(this.state.item.id);
                            }
                        }

                    ],
                    {cancelable: false}
                )
            }
        }
    }

    refreshScreen = (id) => {
        const auth = store.getState().authKeyReducer;
        const authKey = auth !== null ? `${auth.authKey.token_type} ${auth.authKey.access_token}` : '';
        axios({
            url: `${getOnePenality}/${id}`,
            method: 'GET',
            headers: {
                'Authorization': authKey,
                'X-Localization': I18n.currentLocale()
            }
        })
            .then(response => {
                console.log("RESPONSE", response);
                this.setState({
                    item: response.data.response,
                    tauxPenalite: null
                });
            })
            .catch(error => {
                let message = "";
                if (error.response)
                    message = error.response
                else if (error.request)
                    message = error.request
                else
                    message = error.request;

                Alert.alert(
                    I18n.t("ERROR_LABLE"),
                    message.data.error,
                    [
                        {
                            text: I18n.t("OK"), onPress: () => {
                            }
                        }
                    ],
                    {cancelable: false}
                )
            });
    }

    renderDialogModifyPenalite = () => {
        console.log("Current penalite", this.state.penality);
        return (
            <Dialog.Container contentStyle={{width: responsiveWidth(80)}} useNativeDriver={true}
                              visible={this.state.displayDialogModifyPenalite}>

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

                <View>
                    <View
                        style={{width: "100%"}}>
                        <Animatable.View ref={(comp) => {
                            this.tauxPenaliteComp = comp
                        }}>
                            <Fumi iconClass={FontAwesomeIcon}
                                  label={`${I18n.t('TAUX_PENALITE')} ${this.state.penality.year}`}
                                  iconColor={'#f95a25'}
                                  iconSize={20}
                                  keyboardType={"numeric"}
                                  iconName={"edit"}
                                  value={this.state.tauxPenalite === null ? "" + this.state.penality.rate : this.state.tauxPenalite}
                                  onChangeText={(tauxPenalite) => {
                                      this.setState({tauxPenalite});
                                  }}
                                  style={styles.input}
                            >
                            </Fumi>
                        </Animatable.View>

                        <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>
                </View>

                <Dialog.Button bold={true} label={I18n.t('SUBMIT_LABEL')} onPress={() => {
                    if (this.checkOrShake(this.state.tauxPenalite, this.tauxPenaliteComp)) {
                        if (this.checkOrShake(this.state.password, this.passwordAnim)) {
                            this.props.modifyPenalityAction(this.state.penality.id, {
                                id_super: this.state.user.agentId,
                                password: this.state.password,
                                id_royalty_fee: this.state.penality.id_royalty_fee,
                                penalty_rate: this.state.tauxPenalite
                            });
                            this.setState({
                                displayDialogModifyPenalite: false,
                                displayLoader: true,
                                isSubmitClick: true
                            });
                        }
                    }
                }}/>
                <Dialog.Button bold={true} label={I18n.t('CANCEL_LABEL')} onPress={() => {
                    this.setState({
                        displayDialogModifyPenalite: false
                    });
                }}/>
            </Dialog.Container>
        )
    }

    renderDialogDeletePenalite = () => {

        return (
            <Dialog.Container contentStyle={{width: responsiveWidth(80)}} useNativeDriver={true}
                              visible={this.state.displayDialogDeletePenalite}>

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

                <View>
                    <View
                        style={{width: "100%"}}>
                        <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>
                </View>

                <Dialog.Button bold={true} label={I18n.t('SUBMIT_LABEL')} onPress={() => {
                    if (this.checkOrShake(this.state.password, this.passwordAnim)) {
                        this.props.deletePenalityAction(this.state.penality.id, {
                            id_super: this.state.user.agentId,
                            password: this.state.password,
                            id_royalty_fee: this.state.penality.id_royalty_fee
                        });
                        this.setState({
                            displayDialogDeletePenalite: false,
                            displayLoader: true,
                            isSubmitClick: true
                        });
                    }
                }}/>
                <Dialog.Button bold={true} label={I18n.t('CANCEL_LABEL')} onPress={() => {
                    this.setState({
                        displayDialogDeletePenalite: false
                    });

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


    renderBottomSheetOption = () => {
        return (
            <BottomSheet
                ref={(ref) => {
                    this.bottomSheet = ref
                }}
                itemDivider={3}
                backButtonEnabled={true}
                coverScreen={false}
                title="Create"
                options={[
                    {
                        title: I18n.t('MODIFY_PENALITE'),
                        icon: (
                            <MaterialCommunityIcons
                                name="pencil"
                                color="grey"
                                size={24}
                            />
                        ),
                        onPress: () => {
                            this.setState({
                                displayDialogModifyPenalite: true
                            });
                            this.bottomSheet.close();
                        }
                    },
                    {
                        title: I18n.t('DELETE_PENALITE'),
                        icon: (
                            <MaterialCommunityIcons name="delete" color="grey" size={24}/>
                        ),
                        onPress: () => {
                            this.setState({
                                displayDialogDeletePenalite: true
                            });
                            this.bottomSheet.close();
                        }
                    }
                ]}
                isOpen={false}
            />
        )
    }


    _renderTabIndicator() {

        let tabs = [
            {
                text: I18n.t('PENALITE'),
                iconSource: "edit"
            },
            {
                text: I18n.t('TAXES'),
                iconSource: "edit"
            }
        ]
        return <PagerTabIndicator
            style={{
                height: responsiveHeight(8)
            }}
            changePageWithAnimation={true}
            tabs={tabs}/>;
    }

    renderDetailPenalite = () => {

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

        let taxe_name = {name: ""};
        if (this.state.isModify)
            taxe_name = {name: this.state.item.tax_name};
        console.log("tax_name", taxe_name)

        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}>{`${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}>{`${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}>{`${item.adresse}`}</Text>
                </View>

            </View>


            <View
                style={styles.cardcontainer}
            >
                <Text style={{
                    fontSize: 17,
                    fontWeight: 'bold',
                    color: 'black',
                    marginLeft: responsiveWidth(5)
                }}>
                    Déclaration
                </Text>

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

            </View>

            <View style={styles.cardcontainer}>

                <Text style={{
                    fontSize: 17,
                    fontWeight: 'bold',
                    color: 'black',
                    marginLeft: responsiveWidth(5)
                }}>
                    {I18n.t('PENALITE')}
                </Text>

                {
                    this.state.item.penalties.map(item => (
                        <View
                            style={styles.checkboxContainer}>

                            <View style={{width: 25}}>
                                {
                                    item.n_order === 1 &&
                                    <TouchableOpacity
                                        style={[styles.contain], {
                                            backgroundColor: Color.accentColor,
                                            alignItems: "center",
                                            justifyContent: "center",
                                            position: "absolute",
                                            width: 25,
                                            zIndex: 10,
                                            top: 30,
                                            left: 25,
                                            height: 25,
                                            borderRadius: 11}}
                                        onPress={() => {
                                            this.setState({penality: item, displayDialogModifyPenalite: true})
                                        }}
                                        activeOpacity={0.9}>
                                        <View>
                                            <View>
                                                <Icon name={'pencil'} color={Color.whiteColor} size={20}/>
                                            </View>
                                        </View>
                                    </TouchableOpacity>
                                }
                            </View>

                            <View style={{width: 25}}>
                                {
                                    item.n_order === 1 &&
                                    <TouchableOpacity
                                        style={[styles.contain], {
                                            backgroundColor: "red",
                                            alignItems: "center",
                                            justifyContent: "center",
                                            position: "absolute",
                                            width: 25,
                                            zIndex: 10,
                                            top: 70,
                                            height: 25,
                                            borderRadius: 11}}
                                        onPress={() => {
                                            this.setState({penality: item, displayDialogDeletePenalite: true})
                                        }}
                                        activeOpacity={0.9}>
                                        <View>
                                            <View>
                                                <Icon name={'delete'} color={Color.whiteColor} size={20}/>
                                            </View>
                                        </View>
                                    </TouchableOpacity>
                                }
                            </View>

                            <View style={styles.paymentItem}>
                                <View style={styles.content}>
                                    <Text style={styles.title}>{item.id_revenue_order}</Text>

                                    <Text
                                        style={styles.description}>{`Imputation: ${item.imputation}`}</Text>

                                    <Text
                                        style={styles.description}>{`${item.name}`}</Text>

                                    {item.n_order === 1 &&
                                    <Text
                                        style={styles.description}>{`${I18n.t('TAUX')}: ${item.rate}%`}</Text>
                                    }

                                    <View style={styles.timeContent}>
                                        <View style={{alignContent: 'flex-start', flex: 1, flexDirection: 'row'}}>
                                            <Text style={{
                                                fontWeight: 'bold', marginLeft: 20,
                                                marginBottom: 10,
                                            }}>
                                                {`${item.n_order === 1 ? item.amount : item.tax_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}>{moment(moment.tz(item.created_at, moment.tz.guess()).format()).fromNow()}</Text>
                                            </View>

                                        </View>

                                    </View>


                                    <View
                                        style={{
                                            alignContent: 'flex-start',
                                            flexDirection: 'row',
                                            marginLeft: 20
                                        }}>
                                        <Icon name="calendar"
                                              style={[styles.descriptionIcon], {color: Color.accentColor, marginTop: 5}}/>
                                        <Text
                                            style={styles.time}>{` ${I18n.t("YEAR")}: ${item.year}`}</Text>
                                    </View>
                                </View>
                            </View>
                        </View>
                    ))
                }
            </View>

            {/*            <Animatable.View ref={(comp) => {
                this.royalties_fees_anim = comp
            }}
                             style={{
                                 width: responsiveWidth(100),
                                 height: 60,
                                 marginTop: 20,
                                 alignSelf: 'center',
                                 borderRadius: 10,
                                 paddingLeft: 20,
                                 paddingRight: 20,
                                 backgroundColor: 'white'
                             }}>
                <Dropdown
                    label={I18n.t('TAXES')}
                    disabled={this.state.isModify}
                    data={this.state.isModify ? [] : item.royalties_fees}
                    useNativeDriver={true}
                    value={this.state.isModify ? this.state.item.tax_name : this.state.royalties_fees === null ? "" :
                        this.state.royalties_fees}
                    onChangeText={(value, index, data) => {
                        this.setState({royalties_fees: value}, () => {
                            console.log("royalties_fees", this.state.royalties_fees)
                        });
                    }}
                    valueExtractor={(value) => {
                        return value
                    }}
                    labelExtractor={(value) => {
                        return value.name + ' - ' + value.amount
                    }}
                />
            </Animatable.View>

            <Animatable.View ref={(comp) => {
                this.ordreRecetteAnim = comp
            }}>
                <Fumi iconClass={FontAwesomeIcon} iconName={'file'}
                      label={I18n.t('ORDRE_DE_RECETTE_NUMBER')}
                      iconColor={'#f95a25'}
                      iconSize={20}
                      value={this.state.ordreRecetteId}
                      onChangeText={(ordreRecetteId) => {
                          this.setState({ordreRecetteId})
                      }}
                      style={styles.input}
                >
                </Fumi>
            </Animatable.View>

            <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: 'row',
                paddingTop: 10
            }}>

                <View style={{
                    flex: 1,
                    alignItems: 'center'
                }}>
                    <Button
                        style={{
                            borderColor: 'transparent',
                            borderRadius: 6,
                            marginLeft: 5,
                            marginRight: 5,
                            backgroundColor: 'green'
                        }}
                        isLoading={this.props.loadingModifyAvis}
                        onPress={() => {
                            this.setState({loadingModifyAvis: true});
                        }}
                        disabled={true}
                        textStyle={styles.textbtnstyle}
                    >
                        {this.state.isModify ? I18n.t('MODIFY') : I18n.t('SAVE')}
                    </Button>
                </View>
            </View>
        */}

        </ScrollView>);
    }


    renderDetailTaxe = () => {
        return (
            <View style={styles.container}>
                <View style={styles.cardcontainer}>
                    <Text>Bonjour</Text>
                </View>

            </View>
        )
    }

    render() {

        return (
            <>
                {this.renderModifyResponse()}
                {this.renderBottomSheetOption()}
                {this.renderDialogModifyPenalite()}
                {this.renderDialogDeletePenalite()}
                {this.state.displayLoader && this.renderLoader()}
                {this.state.isSubmitClick && this.renderDialogResponse()}
                {(this.state.triggerTreatmentClick || this.state.triggerCancelClick) && this.renderModifyResponse()}

                {
                    <Provider>
                        <View style={{flex: 1}}
                        >
                            <StatusBar
                                backgroundColor={theme.primaryDark}
                                barStyle="light-content"
                                translucent={false}
                            />

                            <Appbar.Header dark={true} style={{backgroundColor: theme.primary}}>
                                <Appbar.BackAction
                                    onPress={() => {
                                        this.props.navigation.pop()
                                    }}
                                />
                                <Appbar.Content
                                    title={I18n.t('PENALITE_MANAGE')}
                                    subtitle={I18n.t('MODIFICATION_SAISIE_PENALITY')}
                                />

                            </Appbar.Header>

                            {
                                this.renderDetailPenalite()
                            }
                        </View>
                    </Provider>
                }

            </>
        );
    }


}

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,

    loadingModifyPenality: state.modifyPenalityReducer.loading,
    resultModifyPenality: state.modifyPenalityReducer.result,
    errorModifyPenality: state.modifyPenalityReducer.error,

    loadingDeletePenality: state.deletePenalityReducer.loading,
    resultDeletePenality: state.deletePenalityReducer.result,
    errorDeletePenality: state.deletePenalityReducer.error,
});

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

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

    treatCreditDemand: treatCreditDemand,
    creditDemandResetReducer: creditDemandResetReducer,

    treatCancelDemand: treatCancelDemand,
    creditCancelResetReducer: creditCancelResetReducer,

    saveOrdreRecetteAction,
    modifyAvisImpositionReset,

    modifyOrdreRecetteAction,

    deletePenalityAction,
    deletePenalityReset,

    modifyPenalityAction,
    modifyPenalityReset,
}, dispatch);

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

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'
    },
    textbtnstyle: {
        color: "white",
        fontWeight: "bold",
        fontSize: 18
    },
    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",
    },
    checkbox: {
        alignSelf: "center",
        color: "white"
    },
    contentPicker: {
        padding: 10,
        paddingBottom: 0,
        marginBottom: 0,
        borderRadius: 8,
        flex: 1,
        alignItems: "center"
    },
    contain: {flexDirection: "row"},
    thumb: {
        borderRadius: 30,
        marginRight: 10
    },
    point: {
        width: 25,
        height: 25,
        borderRadius: 11,
        alignItems: "center",
        justifyContent: "center",
        position: "absolute",
        right: 9,
        bottom: 0
    },
    paymentItem: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        width: "100%",
        borderBottomColor: '#EEE',
        borderBottomWidth: 1
    },
    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,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
    dateText: {
        marginLeft: responsiveWidth(13),
        marginBottom: 20,
        fontSize: 17,
    },
    titlecontent: {
        fontSize: 17,
        marginLeft: responsiveWidth(10),

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

})