/**
 * 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, BackHandler, ProgressBarAndroid, Picker, 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, TextInputMask } from 'react-native-paper'
import I18n from "react-native-i18n"
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();
     }

     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) => {
                    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 }}>
                                   <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 {
               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',
     }
});