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

import React, {Component} from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  ScrollView,
  Alert,
  FlatList,
  ProgressViewIOS,
  ProgressBarAndroid,
  PickerIOS,
  StatusBar,
} from 'react-native';
import ActionButton from 'react-native-action-button';
import MapView from 'react-native-maps';
import {
  responsiveHeight,
  responsiveWidth,
  responsiveFontSize,
} 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, primaryDark, accent} from '../../utils/theme.json';
import * as Animatable from 'react-native-animatable';
import {isNumber} from 'util';
import {readUser} from './../../webservice/AuthApi';
import {sendDemande} from './../../webservice/HistoryRequestApi';
import {sendDemandeSpecificque} from '../../webservice/HistoryRequestApi';
import {getAgentNetworksList} from '../../webservice/NetworkApi';
import {HelperText, TextInput} from 'react-native-paper';
import I18n from 'react-native-i18n';
import {Dropdown} from 'react-native-material-dropdown-v2';
type Props = {};
const route = require('../../route.json');
import {
  Card,
  CardTitle,
  CardContent,
  CardAction,
  CardButton,
  CardImage,
  Title,
} from 'react-native-material-cards';
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();
  }
  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: '',
    };
  }

  onUserCancel() {
    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 => {
          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: ''});
              },
            },
          ]);
          setTimeout(() => {
            this.setState({isSending: false});
          }, 800);
        })
        .catch(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;
    return (
      <View
        style={{
          flex: 1,
          alignItems: 'center',
          backgroundColor: 'lightgrey',
          paddingTop: responsiveHeight(10),
        }}>
        <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>
      );
    }
  }

  multiNetwork() {
    if (true) {
      return (
        <View style={{height: 250, justifyContent: 'center'}}>
          <Card style={{width: responsiveWidth(96), justifyContent: 'center'}}>
            <CardContent>
              <View style={{flex: 1}}>
                <Dropdown
                  label={I18n.t('SELECT_NETWORK')}
                  style={{flex: 1, width: responsiveWidth(70)}}
                  labelExtractor={(item, index) => {
                    return item
                      ? I18n.t('FOR_NUMB') + item.phone + ' (' + item.name + ')'
                      : I18n.t('SELECT_NETWORK');
                  }}
                  valueExtractor={(item, index) => {
                    return item.phone + ' (' + item.name + ')';
                  }}
                  onChangeText={(value, index, data) => {
                    this.setState({currentNetwork: data[index]});
                  }}
                  data={this.state.networks}
                />

                <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 {
      sendDemandeSpecificque(montant, phone, code_membre).then(data => {
        var title = '';
        var message = '';
        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',
  },
});