import React, { Component } from 'react';
import { ScrollView, StyleSheet, View, Image, TouchableOpacity, Text, Linking,AsyncStorage} from 'react-native';
import { Header } from 'react-native-elements';
import ShoppingCart from '../../controllers/ShoppingCart';
import { Content, Item, Picker, Toast } from 'native-base';

import { PAY_URL } from '../../controllers/constants';
import { BASE_URL } from '../../controllers/constants';

import Spinner from 'react-native-loading-spinner-overlay';

import { connect } from 'react-redux';


 class Payment extends Component {

 static navigationOptions = { header: null }
 static navigationOptions = {
    drawerLabel: () => null
}

constructor(props){
    super(props)
    this.state = {
      selected2: undefined,
      selected3: undefined,
      userinfo:'',
      cartitems:[],
      qqty:[],
      cash:'',
      spinner: false,



    };
  }

  onValueChange2(value: string) {
    this.setState({
      selected2: value
    });
  }

  onValueChange3(value: string) {
    this.setState({
      selected3: value
    });
  }



getcartItems = async() =>{
    var fetchitem = await AsyncStorage.getItem('shopping');
    var convertcartItems = JSON.parse(fetchitem);
    this.setState({cartitems: convertcartItems})

}
getQty = async() =>{
    var fetchqty= await AsyncStorage.getItem('qtymoney');
    var convertcartItemsqty = JSON.parse(fetchqty);
    this.setState({qqty: convertcartItemsqty})

}

getCash = async() =>{
    var fetchtotal= await AsyncStorage.getItem('total');
    var convertttola = JSON.parse(fetchtotal);
    this.setState({cash: convertttola})

}




componentDidMount() {
    this.props.navigation.addListener('willFocus',this.getcartItems);
    this.props.navigation.addListener('willFocus',this.getQty);

    this.props.navigation.addListener('willFocus',this.getCash);


  }





  render() {

  var {navigate} = this.props.navigation;

  const {params} = this.props.navigation.state;
    return(
        <View>
            <Header
            statusBarProps={{ barStyle: 'light-content' }}
            outerContainerStyles={{ backgroundColor: '#D60B2B' }}
            leftComponent={{ icon: 'arrow-back', color: '#fff',onPress: () => navigate('Cart') }}
            centerComponent={{ text: 'Payment Method', style: { color: '#fff' } }}
            rightComponent={ <ShoppingCart navigation={ this.props.navigation }/>}
            />

            <ScrollView contentContainerStyle={{ flexGrow: 1, backgroundColor: 'rgba(255,255,255,0)'}}>
            <Spinner
        visible={this.state.spinner}
        textContent={'Loading...'}
        textStyle={styles.spinnerTextStyle}
      />
            <View style={styles.Container}>
                <Text style={{fontWeight:'700', fontSize:15, color: '#787878'}}>DELIVERY ADDRESS:</Text>

                <View style={{borderColor:'#D60B2B',padding:10, borderWidth:2, borderRadius:5, marginTop:10}}>
                    <View style={{flexDirection:'row', marginBottom:15, borderBottomColor: '#D60B2B', borderBottomWidth:1}}>
                        <Text style={{color:'#D60B2B', fontSize:15, padding:5}}>DELIVERY LOCATIONS:</Text>
                        <TouchableOpacity style={{marginLeft: 'auto', backgroundColor:'#D60B2B', paddingLeft:10, paddingRight:10, paddingTop:5, borderTopLeftRadius:3, borderTopRightRadius:3}} onPress={() => {navigate('LocationEdit')}}>
                            <Text style={{fontSize:10, color:'#fff', fontWeight:'600'}}>EDIT</Text>
                        </TouchableOpacity>

                    </View>

                    <Content>
                        {/* <Item picker style={styles.SelectDrops}>
                            <Picker
                                mode="dropdown"
                                style={{ width: 290}}
                                placeholder="Select"
                                placeholderStyle={{ color: "#bfc6ea" }}
                                placeholderIconColor="#007aff"
                                selectedValue={this.state.selected2}
                                onValueChange={this.onValueChange2.bind(this)}>

                                <Picker.Item label="Address #1" value="key0" />
                                <Picker.Item label="Address #2" value="key1" />
                            </Picker>
                        </Item>        */}
                        <Text>{params.address}</Text>
                    </Content>

                </View>

                <View style={{marginTop: 30}}>
                    <Text style={{fontWeight:'700', fontSize:15, color: '#787878'}}>CHOOSE A PAYMENT METHOD</Text>

                    <Content>
                        <Item picker style={styles.SelectDrops}>
                            <Picker
                                mode="dropdown"
                                style={{ width: 290}}
                                placeholder="Select"
                                placeholderStyle={{ color: "#bfc6ea" }}
                                placeholderIconColor="#007aff"
                                selectedValue={this.state.selected3}
                                onValueChange={this.onValueChange3.bind(this)}>

                                <Picker.Item label="PayStack" value="PayStack" />
                                <Picker.Item label="Payment on Delivery" value="Payment on Delivery" />
                            </Picker>
                        </Item>
                    </Content>

                </View>

                <View style={{flexDirection:'row', alignContent:'center',width:'100%', justifyContent:'center', marginTop:20}}>
                        <TouchableOpacity style={styles.btn} onPress={this.pay}>
                            <Text style={{color:'#fff', fontSize:13, alignSelf:'center',marginLeft: 20, marginRight: 20, fontWeight:'700'}}>PROCEED TO PAYMENT</Text>
                        </TouchableOpacity>
                        </View>
                </View>
            </ScrollView>
        </View>
    );
  }

  pay = async () => {


    this.setState({spinner: !this.state.spinner});
    var payparam = this.state.selected3;
    var cartItems = this.state.cartitems;
    var QuantAmount = this.state.qqty;
    var Cash = this.state.cash;



    if(payparam == undefined){
       Toast.show({
            text: 'Choose a payment method',
            position: 'bottom',
            buttonText: 'Okay'
          });

          this.setState({spinner: false});
    }else{




            if(payparam == 'PayStack'){

                var fetchuser = await AsyncStorage.getItem('userBilling');
                var realdata = JSON.parse(fetchuser);

                var id = realdata.id;
                var fname = realdata.first_name;
                var lname = realdata.first_name;
                var addr = realdata.billing.address_1;
                var state = realdata.billing.state;
                var phone = realdata.billing.phone;
                var email =  realdata.email;


                fetch(BASE_URL+'/orders',{
                    method: 'POST',
                    headers:{
                        Accept: 'application/json',
                        'Content-Type': 'application/json',
                        'Authorization': 'Basic Y2tfZTQwOGQzOTdhNTAzYjAzYmI0ZGMzMGNhYmZjZTgyM2ZjYjNjYzZhMzpjc18xNTFhZWJiNWMwMzBkZTk4M2FlNWM1ODkzZGQ2NmViYzEwNmYxOTc3'
                    },

                    body: JSON.stringify({
                      payment_method: 'bacs',
                      payment_method_title:  'Paystack',
                      set_paid: true,
                      customer_id:id,
                      status:'processing',


                      billing: {
                        first_name: fname,
                        last_name:  lname,
                        address_1: addr,
                        state: state,
                        email:  email,
                        phone: phone,

                    },

                    })
                  })

                  .then((response)=> response.json())
                  .then((res)=>{
                      if(res.id){


                        for (let index = 0; index < cartItems.length; index++) {

                            fetch(BASE_URL+'/orders/'+res.id,{
                                method: 'POST',
                                headers:{
                                    Accept: 'application/json',
                                    'Content-Type': 'application/json',
                                    'Authorization': 'Basic Y2tfZTQwOGQzOTdhNTAzYjAzYmI0ZGMzMGNhYmZjZTgyM2ZjYjNjYzZhMzpjc18xNTFhZWJiNWMwMzBkZTk4M2FlNWM1ODkzZGQ2NmViYzEwNmYxOTc3'
                                },

                                body: JSON.stringify({

                                    line_items: [
                                        {
                                          product_id: cartItems[index]['id'],
                                          quantity: QuantAmount['prosize'][index]
                                        }
                                      ],

                                })
                              })

                              .then((response)=> response.json())
                              .then((res)=>{
                                 if(res.id){

                                    this.setState({amount: res.id});
                                  }

                              });


                          }

                        // generate hash

                        fetch('http://paymentapi.genesisrestaurantng.com/payhash',{
                            method: 'POST',
                            headers:{
                                Accept: 'application/json',
                                'Content-Type': 'application/json',
                            },

                            body: JSON.stringify({
                                'total': Cash,
                                'email':email,
                                'oid': res.id

                            })
                          })

                          .then((response)=> response.json())
                          .then((res)=>{

                            if(res.status == 200){

                              Linking.openURL(PAY_URL+'/'+res.hash);
                            }


                          });

                        // end generate hash

                        this.setState({spinner: false});
                        this.props.removeItem();



                      }

                  });


            }else{

                var fetchuser = await AsyncStorage.getItem('userBilling');
                var realdata = JSON.parse(fetchuser);

                var id = realdata.id;
                var fname = realdata.first_name;
                var lname = realdata.first_name;
                var addr = realdata.billing.address_1;
                var state = realdata.billing.state;
                var phone = realdata.billing.phone;
                var email =  realdata.email;

                fetch(BASE_URL+'/orders',{
                    method: 'POST',
                    headers:{
                        Accept: 'application/json',
                        'Content-Type': 'application/json',
                        'Authorization': 'Basic Y2tfZTQwOGQzOTdhNTAzYjAzYmI0ZGMzMGNhYmZjZTgyM2ZjYjNjYzZhMzpjc18xNTFhZWJiNWMwMzBkZTk4M2FlNWM1ODkzZGQ2NmViYzEwNmYxOTc3'
                    },

                    body: JSON.stringify({
                      payment_method: 'bacs',
                      payment_method_title:  'Pay On delivery',
                      set_paid: true,
                      customer_id:id,
                      status:'processing',

                      billing: {
                        first_name: fname,
                        last_name:  lname,
                        address_1: addr,
                        state: state,
                        email:  email,
                        phone: phone,

                    },


                    })
                  })

                  .then((response)=> response.json())
                  .then((res)=>{
                      if(res.id){


                  for (let index = 0; index < cartItems.length; index++) {
                    fetch(BASE_URL+'/orders/'+res.id,{
                        method: 'post',
                        headers:{
                            Accept: 'application/json',
                            'Content-Type': 'application/json',
                            'Authorization': 'Basic Y2tfZTQwOGQzOTdhNTAzYjAzYmI0ZGMzMGNhYmZjZTgyM2ZjYjNjYzZhMzpjc18xNTFhZWJiNWMwMzBkZTk4M2FlNWM1ODkzZGQ2NmViYzEwNmYxOTc3'
                        },

                        body: JSON.stringify({

                            line_items: [
                                {
                                  product_id: cartItems[index]['id'],
                                  quantity: QuantAmount['prosize'][index]
                                }
                              ],

                        })
                      })

                      .then((response)=> response.json())
                      .then((res)=>{
                         if(res.id){

                            this.setState({amount: res.id});
                          }

                      });


                  }

                this.props.removeItem();
                this.setState({spinner: false});
                Toast.show({
                    text: 'Successful !!! You will contacted upon delivery',
                    position: 'bottom',
                    buttonText: 'Okay'
                  });
                      }

                  });


            }

  }
}
}

const mapDispatchToProps = (dispatch)=>{
    return{
        removeItem:(products) =>dispatch({type: 'CLEAR_CART', payload: products })
    }
}



export default connect(null, mapDispatchToProps)(Payment);

const styles = StyleSheet.create({
    Container:{
        backgroundColor:'#fff',
        padding:10,
        borderRadius:10,
        flex:1,
        marginTop:30,
        marginBottom: 50,
        marginLeft: 10,
        marginRight:10,
        paddingBottom:40
},
btn:{
    textAlign:'center',
    padding:15,
    backgroundColor:'#C00A27',
    borderRadius:50,
},

});