/* eslint-disable radix */
/* eslint-disable react-native/no-inline-styles */
import React, {Component} from 'react';
import {Alert, Platform, StyleSheet, Text, View} from 'react-native';
import CardView from 'react-native-cardview';
import Button from 'apsl-react-native-button';
import {responsiveWidth} from 'react-native-responsive-dimensions';
import Icons from 'react-native-vector-icons/Ionicons';
import {readUser} from '../../webservice/AuthApi';
import isNil from 'lodash/isNil';
import {
  creditDemandResetReducer,
  treatCreditDemand,
} from '../../webservice/CreditTreatDemandApi';
import {
  creditCancelResetReducer,
  treatCancelDemand,
} from '../../webservice/CreditCancelDemandeApi';
import {getAgentNetworksList} from '../../webservice/NetworkApi';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import Toast from 'react-native-root-toast';
import {Color} from '../../config/Color';
import Dialog from 'react-native-dialog';
import {FontWeight} from '../../config/typography';
import I18n from 'react-native-i18n';

import 'moment/locale/fr';
import 'moment/locale/es-us';
import 'moment/locale/en-au';
import 'moment/locale/en-ca';
import 'moment/locale/en-ie';
import 'moment/locale/en-il';
import 'moment/locale/en-nz';

let moment = require('moment-timezone');
const momentJS = require('moment');

let typesta = 0;

var colorback = 'white';

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

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

class HistoryItemDetails extends Component {
  static navigatorStyle = {
    navBarBackgroundColor: theme.accentLight,
    statusBarColor: theme.accent,
    navBarTextColor: '#FFFFFF',
    navBarButtonColor: '#FFFFFF',
  };
  static navigationOptions = ({navigation}) => {
    return {
      drawerLabel: () => null,
      title: isNil(navigation.getParam('item', null).item)
        ? 'Transaction N°' + navigation.getParam('item', {id: '-'}).id
        : 'Transaction N°' + navigation.getParam('item', {id: '-'}).item.id,
    };
  };

  constructor(props) {
    super(props);
    this.item = this.props.navigation.getParam('item', null);
    if (isNil(this.props.navigation.getParam('item', null).item)) {
      this.item = this.props.navigation.getParam('item', null);
    } else {
      this.item = this.props.navigation.getParam('item', null).item;
    }

    this.currentLocale = I18n.locale.includes('fr') ? 'fr' : 'en-gb';
    moment.locale(this.currentLocale);

    let sta = '';
    if (this.item.status === '1') {
      typesta = 1;
      colorback = '#AEAEAE';
      sta = I18n.t('TREAT_DEMAND');
    } else if (this.item.status === '0') {
      colorback = 'green';
      typesta = 2;
      sta = I18n.t('ACCEPTER_DEMANDE');
    } else {
      colorback = '#AEAEAE';
      typesta = 2;
      sta = I18n.t('REFUSED');
    }

    this.state = {
      displayAmountModifyDialog: false,
      statut: sta,
      user: null,
      networks: [],
      loadingTreat: false,
      loadingCancel: false,
      triggerTreatmentClick: false,
      triggerCancelClick: false,
      color: colorback,
      montant: null,
      isBtnModifyAmountEnabled: false,
    };
    readUser().then(async user => {
      let networks = [];
      networks = await getAgentNetworksList(user.agentId);
      this.setState({user: user, networks: networks.networks});
    });
  }

  isNormalInteger = str => {
    return /[ `!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]/.test(str) ? false : true;
  };

  isMontantValid = () => {
    const {montant} = this.state;
    if (parseInt(montant) == 0 || montant < 0) {
      return false;
    } else if (!this.isNormalInteger(montant)) {
      return false;
    } else if (parseInt(montant) > parseInt(this.item.montant)) {
      return false;
    } else {
      return true;
    }
  };

  displayToast = message => {
    Toast.show(message, {
      duration: Toast.durations.SHORT,
      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.
      },
    });
  };

  onTreatDemand() {
    if (this.item !== '1') {
      this.props.creditDemandResetReducer();
      this.props.treatCreditDemand(this.item.id);
      /* updateCreditDemand(this.item.phone, this.item.id).then((data) => {
                 this.setState({ loadingTreat: false })
                 console.log(data);

                 if (data.success === 1) {
                      this.setState({ statut: I18n.t('TREAT_DEMAND'), color: "#AEAEAE" })
                 } else {
                      console.log(data);
                 }
            }) */
    }
  }

  onCancelDemand = () => {
    if (this.item !== '1') {
      this.props.treatCancelDemand(this.item.id);
    }
  };

  renderPromptModifyAmountToSend = () => {
    return (
      <Dialog.Container
        useNativeDriver={true}
        visible={this.state.displayAmountModifyDialog}>
        <Dialog.Title>{I18n.t('MODIFY_AMOUNT')}</Dialog.Title>

        <Dialog.Description style={[FontWeight.bold]}>
          {I18n.t('ENTER_NEW_AMOUNT_TO_SEND')}
        </Dialog.Description>

        <Dialog.Input
          style={styles.inputAmountText}
          value={this.state.montant}
          keyboardType="numeric"
          onChangeText={montant => {
            this.setState({montant}, () => {
              if (this.isMontantValid(montant)) {
                this.setState({
                  isBtnModifyAmountEnabled: true,
                });
              } else {
                this.setState({
                  isBtnModifyAmountEnabled: false,
                });
              }

              console.log(
                'this.isMontantValid().isValid',
                this.isMontantValid(),
              );
              console.log(
                'isBtnModifyAmountEnabled',
                this.state.isBtnModifyAmountEnabled,
              );
            });
          }}
        />

        <Dialog.Button
          bold={true}
          label={I18n.t('CANCEL_LABEL')}
          onPress={() => this.setState({displayAmountModifyDialog: false})}
        />
        <Dialog.Button
          bold={true}
          label={I18n.t('SEND')}
          disable={this.state.isBtnModifyAmountEnabled}
          onPress={() => {
            this.props.creditDemandResetReducer();
            this.props.treatCreditDemand(this.item.id, this.state.montant);
          }}
        />
      </Dialog.Container>
    );
  };

  renderAlertErrorTreatOrCancelDemand = () => {
    const {
      errorTreatDemand,
      resultTreatDemand,
      resultCancelDemand,
      errorCancelDemand,
    } = this.props;

    if (errorTreatDemand !== null) {
      if (typeof errorTreatDemand.data !== 'undefined') {
        if (errorTreatDemand.status === 426) {
          Alert.alert(
            I18n.t('ERROR_TREATMENT_DEMAND'),
            errorTreatDemand.data.error,
            [
              {
                text: I18n.t('CANCEL_LABEL'),
                onPress: () => {},
                style: 'cancel',
              },
              {
                text: I18n.t('OK'),
                onPress: () => {
                  setTimeout(() => {
                    this.setState({
                      displayAmountModifyDialog: true,
                    });
                  }, 10);
                  this.props.creditDemandResetReducer();
                  this.props.creditCancelResetReducer();
                },
              },
            ],
            {cancelable: false},
          );
        } else {
          Alert.alert(
            I18n.t('ERROR_TREATMENT_DEMAND'),
            errorTreatDemand.data.error,
            [
              {
                text: I18n.t('OK'),
                onPress: () => {
                  this.props.creditDemandResetReducer();
                  this.props.creditCancelResetReducer();
                },
              },
            ],
            {cancelable: false},
          );
        }
      }
    }

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

    if (resultTreatDemand !== null) {
      console.log('resultTreatDemand', resultTreatDemand);
      if (resultTreatDemand.status === 200) {
        this.displayToast(resultTreatDemand.response);
        this.props.navigation.goBack();
        if (!isNil(this.props.navigation.state.params.onGoBack)) {
          this.props.navigation.state.params.onGoBack();
        }
        this.props.creditCancelResetReducer();
        this.props.creditDemandResetReducer();
      }
    }

    if (resultCancelDemand !== null) {
      console.log('resultCancelDemand', resultCancelDemand);
      if (resultCancelDemand.status === 200) {
        this.displayToast(resultCancelDemand.response);
        this.props.navigation.goBack();
        if (!isNil(this.props.navigation.state.params.onGoBack)) {
          this.props.navigation.state.params.onGoBack();
        }
        this.props.creditCancelResetReducer();
        this.props.creditDemandResetReducer();
      }
    }
  };

  renderBtn() {
    const {user} = this.state;
    console.warn('ITEM ITEM', this.item);
    console.warn('Code Membre', user.code_membre);
    if (user) {
      if (
        this.item.code_parrain.toLowerCase() === user.code_membre.toLowerCase()
      ) {
        console.warn('Conditions vérifié');
        if (this.item.status === '1') {
          return (
            <Button
              style={{
                borderColor: 'transparent',
                borderRadius: 6,
                marginLeft: 5,
                marginRight: 5,
                backgroundColor: this.state.color,
              }}
              isLoading={this.props.loadingTreatDemand}
              onPress={() => {}}
              disabled={true}
              textStyle={styles.textbtnstyle}>
              {this.state.statut}
            </Button>
          );
        }
        if (this.item.status === '2') {
          return (
            <Button
              style={{
                borderColor: 'transparent',
                borderRadius: 6,
                marginLeft: 5,
                marginRight: 5,
                backgroundColor: this.state.color,
              }}
              onPress={() => {}}
              disabled={true}
              textStyle={styles.textbtnstyle}>
              {this.state.statut}
            </Button>
          );
        } else {
          return (
            <View
              style={{
                flexDirection: 'row',
                paddingTop: 10,
              }}>
              <View
                style={{
                  flex: 1,
                  alignItems: 'center',
                }}>
                <Button
                  style={{
                    borderColor: 'transparent',
                    borderRadius: 6,
                    marginLeft: 5,
                    marginRight: 5,
                    backgroundColor: this.state.color,
                  }}
                  isLoading={this.props.loadingTreatDemand}
                  onPress={() => {
                    this.setState({
                      triggerTreatmentClick: true,
                    });
                    this.onTreatDemand();
                    
                  }}
                  textStyle={styles.textbtnstyle}>
                  {this.state.statut}
                </Button>
              </View>

              <View
                style={{
                  flex: 1,
                  alignItems: 'center',
                }}>
                <Button
                  style={{
                    borderColor: 'transparent',
                    borderRadius: 6,
                    marginLeft: 5,
                    marginRight: 5,
                    backgroundColor: Color.redColor,
                  }}
                  isLoading={this.props.loadingCancelDemand}
                  onPress={() => {
                    this.setState({
                      triggerCancelClick: true,
                    });
                    this.onCancelDemand();
                  }}
                  textStyle={styles.textbtnstyle}>
                  {I18n.t('REFUSER_DEMANDE')}
                </Button>
              </View>
            </View>
          );
        }
      }
    }
  }

  render() {
    let ago = moment.tz(this.item.date_creation, moment.tz.guess()).format();
    ago = moment(ago);

    let cancelDate = '';
    if (parseInt(this.item.canceled_by_hypervisor) === 1) {
      console.log('CANCEL DATE', this.item.cancellation_date);
      cancelDate = moment
        .tz(this.item.cancellation_date, moment.tz.guess())
        .format();
      cancelDate = moment(cancelDate);
    }

    return (
      <View style={styles.container}>
        {this.renderPromptModifyAmountToSend()}
        {(this.state.triggerTreatmentClick || this.state.triggerCancelClick) &&
          this.renderAlertErrorTreatOrCancelDemand()}
        <CardView style={styles.cardcontainer1}>
          <Text
            style={{
              fontSize: 17,
              fontWeight: 'bold',
              color: 'black',
              marginLeft: responsiveWidth(5),
            }}>
            {I18n.t('MEMBER_INFO')}
          </Text>
          <View
            style={{
              flexDirection: 'row',
              justifyContent: 'flex-start',
            }}>
            <Icons
              name="md-call"
              size={28}
              color={theme.accent}
              style={{
                marginLeft: 20,
              }}
            />
            <Text style={styles.simpleuser}>{this.item.phone}</Text>
          </View>
          <View
            style={{
              flexDirection: 'row',
              justifyContent: 'flex-start',
            }}>
            <Icons
              name="md-person"
              size={28}
              color={theme.accent}
              style={{
                marginLeft: 20,
              }}
            />
            <Text style={styles.simpleuser}>{this.item.code_membre}</Text>
          </View>
        </CardView>
        <CardView style={styles.cardcontainer}>
          <Text
            style={{
              fontSize: 17,
              fontWeight: 'bold',
              color: 'black',
              marginLeft: responsiveWidth(5),
            }}>
            {I18n.t('DEMAND_INFO')}
          </Text>
          <View
            style={{
              flexDirection: 'row',
              justifyContent: 'flex-start',
            }}>
            <Icons
              name="md-git-branch"
              size={28}
              color={theme.accent}
              style={{
                marginLeft: 20,
              }}
            />
            <Text style={styles.simpleuser}>{this.item.code_parrain}</Text>
          </View>
          <View
            style={{
              flexDirection: 'row',
              justifyContent: 'flex-start',
            }}>
            <Icons
              name="md-code-working"
              size={28}
              color={theme.accent}
              style={{
                marginLeft: 20,
              }}
            />
            <Text style={styles.simpleuser}>{this.item.reseau}</Text>
          </View>
          <View
            style={{
              flexDirection: 'row',
              justifyContent: 'flex-start',
            }}>
            <Icons
              name="md-wallet"
              size={28}
              color={theme.accent}
              style={{
                marginLeft: 20,
              }}
            />
            <Text style={styles.simpleuser}>{this.item.montant}</Text>
          </View>
          <View
            style={{
              flexDirection: 'row',
              justifyContent: 'flex-start',
            }}>
            <Icons
              name="md-calendar"
              size={28}
              color={theme.accent}
              style={{
                marginLeft: 20,
              }}
            />
            <Text style={styles.simpleuser}>
              {ago.format(' Do MMMM YYYY à HH:mm')}
            </Text>
          </View>
          <View
            style={{
              flexDirection: 'row',
              alignSelf: 'flex-end',
              marginRight: 20,
              justifyContent: 'flex-start',
            }}>
            <Icons name="md-time" size={28} color={theme.accent} />
            <Text
              style={{
                marginLeft: responsiveWidth(2),
                fontSize: 16,
                color: theme.accent,
              }}>
              {ago.fromNow()}
            </Text>
          </View>
        </CardView>
        {parseInt(this.item.canceled_by_hypervisor) === 1 && (
          <CardView style={styles.cardcontainer}>
            <Text
              style={{
                fontSize: 17,
                fontWeight: 'bold',
                color: 'black',
                marginLeft: responsiveWidth(5),
              }}>
              {I18n.t('DEMAND_STATE')}
            </Text>
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'flex-start',
              }}>
              <Icons
                name="md-git-branch"
                size={28}
                color={theme.accent}
                style={{marginLeft: 20}}
              />
              <Text style={styles.simpleuser}>
                {I18n.t('CANCEL_BY_HYPERVISOR')}
              </Text>
            </View>
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'flex-start',
                marginTop: -20,
              }}>
              <Icons
                name="md-calendar"
                size={28}
                color={theme.accent}
                style={{
                  marginLeft: 20,
                }}
              />
              <Text style={styles.simpleuser}>{`${I18n.t(
                'CANCEL_ON',
              )} ${cancelDate.format(' Do MMMM YYYY à HH:mm')}`}</Text>
            </View>
          </CardView>
        )}
        {this.state.user ? this.renderBtn() : null}
      </View>
    );
  }
}

const mapStateToProps = state => ({
  loadingTreatDemand: state.creditTreatDemandReducer.loadingTreatDemand,
  resultTreatDemand: state.creditTreatDemandReducer.resultTreatDemand,
  errorTreatDemand: state.creditTreatDemandReducer.errorTreatDemand,

  loadingCancelDemand: state.creditCancelDemandReducer.loadingCancelDemand,
  resultCancelDemand: state.creditCancelDemandReducer.resultCancelDemand,
  errorCancelDemand: state.creditCancelDemandReducer.errorCancelDemand,
});

const mapDispatchToProps = dispatch =>
  bindActionCreators(
    {
      treatCreditDemand: treatCreditDemand,
      creditDemandResetReducer: creditDemandResetReducer,

      treatCancelDemand: treatCancelDemand,
      creditCancelResetReducer: creditCancelResetReducer,
    },
    dispatch,
  );

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

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,
  },
  cardcontainer1: {
    justifyContent: 'space-evenly',
    flex: 2,
    marginRight: 3,
    marginLeft: 3,
  },
  cardcontainer: {
    justifyContent: 'space-evenly',

    flex: 3,
    margin: 3,
  },
});