/* eslint-disable prettier/prettier */
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {
  Alert,
  BackHandler,
  Picker,
  ProgressBarAndroid,
  StatusBar,
  StyleSheet,
  Text,
  View,
} from 'react-native';
import {
  responsiveFontSize,
  responsiveHeight,
  responsiveWidth,
} from 'react-native-responsive-dimensions';
import CardView from 'react-native-cardview';
import {Sae} from 'react-native-textinput-effects';
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import Button from 'apsl-react-native-button';
import {primary} from '../../utils/theme.json';
import * as Animatable from 'react-native-animatable';
import {isNumber} from 'util';
import {readUser} from './../../webservice/AuthApi';
import {sendDemandeSpecificque} from '../../webservice/HistoryRequestApi';
import {getAgentNetworksList} from '../../webservice/NetworkApi';
import {HelperText, TextInput} from 'react-native-paper';
import I18n from 'react-native-i18n';
import {ProgressDialog} from 'react-native-simple-dialogs';
import {
  Card,
  CardAction,
  CardButton,
  CardContent,
} from 'react-native-material-cards';

type Props = {};
const route = require('../../route.json');

export default class HistoryRequester extends Component {
  static navigatorStyle = {
    navBarHidden: true,
  };
  static navigationOptions = {
    drawerLabel: () => null,
    headerTitle: I18n.t('ASK_CREDIT'),
    title: I18n.t('ASK_CREDIT'),
  };

  constructor(props) {
    super(props);
    this.state = this.initState();
    this.updateState();
  }

  componentDidDisappear() {
    BackHandler.removeEventListener('hardwareBackPress', this.backPressed);
    this.props.navigation.state.params.onGoBack();
  }

  componentDidAppear() {
    BackHandler.addEventListener('hardwareBackPress', this.backPressed);
  }

  componentWillUnmount() {
    this.props.navigation.state.params.onGoBack();
  }

  handleViewRef = ref => (this.numberView = ref);
  handleMontantRef = ref => (this.montantView = ref);

  initState() {
    return {
      phone: null,
      montant: undefined,
      isSending: false,
      isDisabled: true,
      networks: [],
      user: null,
      visibleError: false,
      currentNetwork: {nt: 1},
      errorAnimation: '',
    };
  }

  backPressed = () => {
    this.props.navigation.state.params.onGoBack();
  };

  onUserCancel() {
    console.log(this.props);
    this.props.navigation.state.params.onGoBack();
    this.props.navigation.goBack();
  }

  onUserSend() {
    var validMontant = true;
    if (!isNumber(this.state.montant) || this.state.montant > 1000000) {
      validMontant = false;
    }
    this.setState({visibleError: !validMontant});
    if (!validMontant) {
      this.montantView.shake(800);
      setTimeout(() => {
        this.setState({visibleError: false});
      }, 3000);
    } else {
      this.setState({isSending: true});
      let title = '';
      let message = '';
      sendDemandeSpecificque(
        this.state.montant,
        this.state.user.phoneTransaction,
        this.state.user.code_membre,
      )
        .then(data => {
          console.warn(data);
          this.setState({isSending: false});
          if (data.success !== undefined) {
            if (data.success === 1) {
              (title = I18n.t('DEMAND_SEND')),
                (message = I18n.t('DEMAND_SEND_SUCCESFUL'));
            } else {
              (title = "Erreur survenu lors de l'envoie "),
                (message =
                  "Une erreur est survenu lors de l'envoie de la demande");
            }
          } else {
            (title = "Erreur survenu lors de l'envoie "),
              (message =
                "Une erreur est survenu lors de l'envoie de la demande");
          }
          Alert.alert(title, message, [
            {
              text: 'Ok',
              onPress: () => {
                this.setState({montant: ''});
              },
            },
          ]);
        })
        .catch(error => {
          this.setState({isSending: false});
          console.warn(error);
          (title = "Erreur survenu lors de l'envoie "),
            (message = "Une erreur est survenu lors de l'envoie de la demande");
          Alert.alert(title, message, [{text: 'Ok'}]);
        });
    }
  }

  render() {
    const {user} = this.state;
    console.log(this.state);
    return (
      <View
        style={{
          flex: 1,
          alignItems: 'center',
          backgroundColor: 'lightgrey',
          paddingTop: responsiveHeight(10),
        }}>
        {this.state.isSending && this.renderLoader()}
        <StatusBar translucent={false} />
        {user ? (
          user.category === 'geolocated' ? (
            this.multiNetwork()
          ) : (
            this.simpleAgent()
          )
        ) : (
          <ProgressBarAndroid />
        )}
      </View>
    );
  }

  simpleAgent() {
    let montant = 0;
    if (true) {
      return (
        <View style={{height: 200}}>
          <Card style={{width: responsiveWidth(96), paddingTop: 20}}>
            <CardContent>
              <View>
                <Animatable.View ref={this.handleMontantRef}>
                  <TextInput
                    label={I18n.t('AMOUNT')}
                    keyboardType={'numeric'}
                    style={input.selfitem}
                    ref={ref => {
                      this.refInp = ref;
                    }}
                    mode={'outlined'}
                    inputStyle={input.style}
                    onChangeText={text => {
                      try {
                        let neb = parseInt(text);
                        this.setState({montant: neb, isDisabled: isNaN(neb)});
                      } catch (e) {}
                    }}
                    value={this.state.montant}
                  />
                  <HelperText type="error" visible={this.state.visibleError}>
                    {I18n.t('INVALID_MONTANT')}
                  </HelperText>
                </Animatable.View>
              </View>
            </CardContent>
            <CardAction separator={true} inColumn={false}>
              <CardButton
                onPress={() => {
                  this.onUserCancel();
                }}
                title={I18n.t('CANCEL')}
                color="crimson"
              />
              <CardButton
                onPress={() => {
                  this.onUserSend();
                }}
                title={I18n.t('SEND')}
                color="steelblue"
              />
            </CardAction>
          </Card>
        </View>
      );
    } else
      return (
        <View style={styles.container}>
          <CardView style={styles.cardInput}>
            <View>
              <Text style={styles.title}>Demande de credit</Text>
              <Animatable.View ref={this.handleMontantRef}>
                <Sae
                  label={I18n.t('AMOUNT')}
                  iconClass={FontAwesomeIcon}
                  iconName={'dollar'}
                  iconColor={primary}
                  inputStyle={input.style}
                  keyboardType={'numeric'}
                  value={this.state.montant}
                  ref={ref => {
                    this.refInp = ref;
                  }}
                  onChangeText={text => {
                    if (text.length > 0) {
                      try {
                        montant = parseFloat(text);
                        this.setState({
                          isDisabled: montant > 0,
                          montant: montant,
                        });
                      } catch (e) {}
                    }
                  }}
                  style={input.selfitem}
                  labelStyle={input.label}
                  autoCapitalize={'none'}
                  autoCorrect={false}
                />
              </Animatable.View>
            </View>
            <View style={styles.btnContainer}>
              <Button
                style={styles.button_1}
                textStyle={styles.button_1_text}
                onPress={() => this.onUserCancel()}>
                {I18n.t('CANCEL')}
              </Button>
              <Button
                isLoading={this.state.isSending}
                isDisabled={!this.state.isDisabled}
                style={styles.button_2}
                ref={r => {
                  this.refBtn = r;
                }}
                textStyle={styles.button_2_text}
                onPress={() => {
                  this.onUserSend();
                }}>
                {I18n.t('SEND')}
              </Button>
            </View>
          </CardView>
        </View>
      );
  }

  renderLoader = () => {
    return (
      <ProgressDialog
        visible={this.state.isSending}
        title={I18n.t('LOADING')}
        message={I18n.t('LOADING_INFO')}
      />
    );
  };

  multiNetwork() {
    if (true) {
      return (
        <View style={{height: 250, justifyContent: 'center'}}>
          <Card style={{width: responsiveWidth(96), justifyContent: 'center'}}>
            <CardContent>
              <View style={{flex: 1}}>
                <View style={{flexDirection: 'row'}}>
                  <Picker
                    selectedValue={this.state.currentNetwork}
                    prompt={I18n.t('SELECT_NETWORK')}
                    style={{height: 50, flex: 1, marginLeft: 20}}
                    itemStyle={styles.subtitle}
                    onValueChange={(itemValue, itemIndex) =>
                      this.setState({currentNetwork: itemValue})
                    }>
                    {this.state.networks.map((item, index) => {
                      return (
                        <Picker.Item
                          label={
                            item.nt
                              ? I18n.t('SELECT_NETWORK')
                              : I18n.t('FOR_NUMB') +
                                item.phone +
                                ' (' +
                                item.name +
                                ')'
                          }
                          value={item}
                        />
                      );
                    })}
                  </Picker>
                </View>
                <Animatable.View ref={this.handleMontantRef}>
                  <TextInput
                    label={I18n.t('AMOUNT')}
                    keyboardType={'numeric'}
                    style={input.selfitem}
                    ref={ref => {
                      this.refInp = ref;
                    }}
                    mode={'outlined'}
                    inputStyle={input.style}
                    onChangeText={text => {
                      try {
                        let neb = parseInt(text);
                        this.setState({montant: neb, isDisabled: isNaN(neb)});
                      } catch (e) {}
                    }}
                    value={this.state.montant}
                  />
                  <HelperText type="error" visible={this.state.visibleError}>
                    {I18n.t('INVALID_MONTANT')}
                  </HelperText>
                </Animatable.View>
              </View>
            </CardContent>
            <CardAction separator={true} inColumn={false}>
              <CardButton
                onPress={() => {
                  this.onUserCancel();
                }}
                title={I18n.t('CANCEL')}
                color="crimson"
              />
              <CardButton
                onPress={() => {
                  const {currentNetwork, montant} = this.state;
                  if (
                    currentNetwork !== undefined &&
                    currentNetwork.nt === undefined
                  ) {
                    this.onNetworkSend(
                      currentNetwork.phone,
                      currentNetwork.code_membre,
                      montant,
                    );
                  }
                }}
                title={I18n.t('SEND')}
                color="steelblue"
              />
            </CardAction>
          </Card>
        </View>
      );
    } else
      {return (
                <View style={styles.container2}>
                    <CardView style={styles.cardInput2}>
                        <View>
                            <Text style={styles.title}>{I18n.t('ASK_CREDIT')}</Text>
                            <Picker
                                selectedValue={this.state.currentNetwork}
                                prompt={"Selectionner un reseau"}
                                style={{height: 50, width: responsiveWidth(100)}}
                                itemStyle={styles.subtitle}
                                onValueChange={(itemValue, itemIndex) =>
                                    this.setState({currentNetwork: itemValue})
                                }>
                                {this.state.networks.map((item, index) => {
                                    return (<Picker.Item
                                        label={item.nt ? "Selectionner un reseau" : "Pour le " + item.phone + " (" + item.name + ")"}
                                        value={item}/>)
                                })}

                            </Picker>
                            <Animatable.View
                                ref={this.handleMontantRef}
                            >
                                <Sae
                                    label={I18n.t('AMOUNT')}
                                    iconClass={FontAwesomeIcon}
                                    iconName={'dollar'}
                                    iconColor={primary}
                                    ref={(ref) => {
                                        this.refInp = ref
                                    }}
                                    inputStyle={input.style}
                                    keyboardType={"numeric"}
                                    onChangeText={(text) => {
                                        try {
                                            let neb = parseInt(text)
                                            this.setState({montant: neb, isDisabled: isNaN(neb)})
                                        } catch (e) {

                                        }
                                    }}
                                    style={input.selfitem}
                                    labelStyle={input.label}
                                    autoCapitalize={'none'}
                                    autoCorrect={false}
                                />
                            </Animatable.View>

                        </View>
                        <View style={styles.btnContainer}>
                            <Button style={styles.button_1}
                                    textStyle={styles.button_1_text} onPress={() => this.onUserCancel()}>
                                {I18n.t('CANCEL')}
                            </Button>
                            <Button
                                ref={ref => {
                                    this.refBtn = ref
                                }}
                                isDisabled={this.state.isDisabled}
                                style={styles.button_2}
                                textStyle={styles.button_2_text}
                                onPress={() => {
                                    const {currentNetwork, montant} = this.state
                                    if (currentNetwork !== undefined && currentNetwork.nt === undefined) {
                                        this.onNetworkSend(currentNetwork.phone, currentNetwork.code_membre, montant, this.refInp, this.refBtn)
                                    }
                                }}>
                                {I18n.t('SEND')}
                            </Button>

                        </View>
                    </CardView>
                </View>)};
  
  }

  renderSingleNetwork(item) {
    const itm = item.item;
    console.log(item);
    let refInp = null,
      refBtn = null;
    let montant = 0;
    return (
      <View style={styles.container2}>
        <CardView style={styles.cardInput2}>
          <View>
            <Text style={styles.title}>{I18n.t('ASK_CREDIT')}</Text>
            <Text style={styles.subtitle}>
              {I18n.t('FOR_NUMB')} {itm.phone} ({itm.name})
            </Text>
            <Animatable.View ref={this.handleMontantRef}>
              <Sae
                label={I18n.t('AMOUNT')}
                iconClass={FontAwesomeIcon}
                iconName={'dollar'}
                iconColor={primary}
                ref={ref => {
                  refInp = ref;
                  this.setState({refIn: refInp});
                }}
                inputStyle={input.style}
                value={this.state.montant}
                keyboardType={'numeric'}
                onChangeText={text => {
                  if (text.length > 0) {
                    try {
                      montant = parseFloat(text);
                      this.setStat({montant: montant});
                      if (refBtn) {
                        refBtn.setState({isDisabled: montant > 0});
                        refBtn.isDisabled = montant > 0;
                      }
                    } catch (e) {}
                  }
                }}
                style={input.selfitem}
                labelStyle={input.label}
                autoCapitalize={'none'}
                autoCorrect={false}
              />
            </Animatable.View>
          </View>
          <View style={styles.btnContainer}>
            <Button
              style={styles.button_1}
              textStyle={styles.button_1_text}
              onPress={() => this.onUserCancel()}>
              {I18n.t('CANCEL')}
            </Button>
            <Button
              ref={ref => {
                refBtn = ref;
              }}
              style={styles.button_2}
              textStyle={styles.button_2_text}
              onPress={() => {
                this.onNetworkSend(
                  itm.phone,
                  itm.code_membre,
                  refInp.state.value,
                  refInp,
                  refBtn,
                );
              }}>
              {I18n.t('SEND')}
            </Button>
          </View>
        </CardView>
      </View>
    );
  }

  onNetworkSend(phone, code_membre, text) {
    var validMontant = true;
    let montant = parseFloat(text);
    if (montant === null || !isNumber(montant) || montant > 1000000) {
      validMontant = false;
    }
    this.setState({visibleError: !validMontant});
    if (!validMontant) {
      this.montantView.shake(800);
      setTimeout(() => {
        this.setState({visibleError: false});
      }, 3000);
    } else {
      this.setState({isSending: true});
      sendDemandeSpecificque(montant, phone, code_membre).then(data => {
        this.setState({isSending: false});
        var title = '';
        var message = '';
        console.warn(data);
        if (data.success !== undefined) {
          if (data.success === 1) {
            title = I18n.t('DEMAND_SEND');
            message = I18n.t('DEMAND_SEND_SUCCESFUL');
          } else {
            title = "Erreur survenu lors de l'envoie ";
            message = "Une erreur est survenu lors de l'envoie de la demande";
          }
        } else {
          title = "Erreur survenu lors de l'envoie ";
          message = "Une erreur est survenu lors de l'envoie de la demande";
        }

        Alert.alert(title, message, [
          {
            text: 'Ok',
            onPress: () => {
              this.setState({montant: ''});
            },
          },
        ]);
      });
    }
  }

  async updateState() {
    let user = await readUser();
    if (user.category === 'geolocated') {
      let networks = await getAgentNetworksList(user.agentId);
      console.log(networks);
      if (networks.success === 1) {
        let net = [this.state.currentNetwork];
        networks.networks.forEach(item => {
          net.push(item);
        });
        this.setState({networks: net});
      }
    }
    this.setState({user: user});
  }
}

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

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

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

  button_2_text: {
    color: 'white',
    fontWeight: 'bold',
  },
  cardInput: {
    marginLeft: 10,
    marginRight: 10,
    marginTop: responsiveHeight(5),
    width: responsiveWidth(98),
    alignSelf: 'center',
    justifyContent: 'space-between',
    height: responsiveHeight(40),
  },
  cardInput2: {
    marginLeft: 10,
    marginRight: 10,
    marginTop: responsiveHeight(1),
    width: responsiveWidth(98),
    height: responsiveHeight(50),
    alignSelf: 'center',
    justifyContent: 'space-between',
  },
});