import React,{ Component } from 'react';
import OfflineNotice from './OfflineNotice';
import axios from 'axios';
import { SafeAreaView, View, Text, StyleSheet, StatusBar, AsyncStorage,
  TouchableHighlight,
  NativeModules,
  NativeEventEmitter,
  Alert } from 'react-native';
  import base from '../firebaseConfig';
  import { Container, Content, Card, CardItem, Header, Item, Left, Right, Body, Button, Icon, Input, Image, List, ListItem, Footer, Tabs, Tab, TabHeading, Form, Label, Radio} from 'native-base';
  import RazorpayCheckout from 'react-native-razorpay';
  import MapView from 'react-native-maps';

var hour = new Date().getHours();
//var hour = 12.46;
var fuckkk = null;
  var payId = null;
  var move;
  var orderKey;

  class PaymentMode extends Component {
    constructor(props) {
      super(props);

      var date = new Date().getDate();
      var month = new Date().getMonth() + 1;
      var year = new Date().getFullYear();
      move = props.navigation;

      this.state = {
        dt : {},
        date : date + '/' + month + '/' + year,
        latitude: null,
        longitude: null,
        showCOD : 'flex',
        showCardOD : 'flex',
        ts122 : 'none',
        ts24 : 'none',
        ts46 : 'none',
        ts69 : 'none',
        pm1:false,
        pm2:false,
        pm3:false,
        pm4:false,
        error:null,
        one : false,
        two : false,
        three : false,
        four : false,
        nextDay : '',
        deliveryTiming : null,
        total : 0,
        totalItems : 0,
        showPM : 'none'
      };


    }

_sendMsg = (oid) => {
  axios.get('http://smst.inroys.in/vendorsms/pushsms.aspx?user=liquor_cart&password=jaipur4321&msisdn=91' + this.state.dt.mobile +'&sid=LQRCRT&msg=Thankyou '+ this.state.dt.name + ', Your Order No  '+oid+'  has been Confirmed will be delivered shortly.'+'&fl=0&gwid=2' )
        .then(function (response) {
          //alert('msg send')
          console.log('send');
        })
        .catch(function (error) {
          //alert('msg not send')
          console.log(error);
      });
}

  _onlinePayment = (tp) => {
    var that = this;
    var options = {
      description: 'Liquor Order Payment',
      image: 'https://image.ibb.co/dRfzk8/pp_Cropped.jpg',
      currency: 'INR',
      key: 'rzp_test_W95b9b1G4Voj1E',
      amount: tp*100,
      name: 'Liquorcart',
      prefill: {
        email: '',
        contact: this.state.dt.mobile,
        name: this.state.dt.name
      },
      theme: { color: '#000' }
    }

        RazorpayCheckout.open(options).then((data) => {
          // handle success
          payId = data.razorpay_payment_id;
          // console.log(move)
          // console.log(payId)
          // alert(`Success: ${data.razorpay_payment_id}`);
          orderKey = base.push('liquorOrders', {
            data: {
              userid: this.state.userKey,
              date: this.state.date,
              amount: tp,
              totalItems: this.state.totalItems,
              status: 'Confirmed',
              userCords: this.state.dt.address.userCords,
              deliveryPerson: 'mobileNo',
              item: this.state.dt.cart,
              address: this.state.dt.address,
              name: this.state.dt.name,
              mobile: this.state.dt.mobile,
              deliveryTiming: this.state.deliveryTiming,
              paymentMode: 'Online',
              razorpayId: payId
            },
            then(err) {
              if (!err) {
                base.remove('/users/' + fuckkk + '/cart');
                that._sendMsg(orderKey.key.substring(14, ));
                move.navigate('orderSuccess');
              }
            }
          });

        }).catch((error) => {
          // handle failure
          alert(` ${error.description}`);
          move.navigate('orderError');
        });
        RazorpayCheckout.onExternalWalletSelection(data => {
          alert(`External Wallet Selected: ${data.external_wallet} `);
        });
  }

  componentWillMount(){

    AsyncStorage.getItem("userKey").then((value) => {
        fuckkk = value
      this.setState({ userKey: value });
      console.log('sdf' + this.state.userKey)
      console.log('ga' + fuckkk)

      base.bindToState('users/' + this.state.userKey, {
        context: this,
        asArray: false,
        state: 'dt'
      })

    }).done();


    // if (hour >= 16) {
    //   this.setState({
    //     showCOD: 'none',
    //   })
    // }

    // if (hour >= 18) {
    //   this.setState({
    //     showCardOD: 'none',
    //   })
    // }

    // if (hour >= 20) {
    //   this.setState({
    //     showCardOD: 'flex',
    //     showCOD: 'flex',
    //   })
    // }


    ///time slot BC


    if(hour < 12 ){
    console.log(hour < 12 );

      this.setState({
        ts122: 'flex',
        ts24: 'flex',
        ts46: 'flex',
        ts69: 'flex',
        nextDay: '',
      })

    }else if( hour > 12 && hour < 14){

    console.log(hour > 12 && hour < 14);
      this.setState({
        ts122: 'none',
        ts24: 'flex',
        ts46: 'flex',
        ts69: 'flex',
        nextDay: '',
      })

    }else if( hour >= 14 && hour < 16){

    console.log(hour > 14 && hour < 16);
      this.setState({
        ts122: 'none',
        ts24:  'none',
        ts46:  'flex',
        ts69: 'flex',
        nextDay: '',
      })

    }else if( hour >= 16 && hour < 18){

    console.log(hour > 16 && hour < 18);
      this.setState({
        ts122: 'none',
        ts24:  'none',
        ts46:  'none',
        ts69: 'flex',
        nextDay: '',
        })

    }else if( hour >= 18){

      this.setState({
        nextDay: 'TOMORROW',
        ts122: 'flex',
        ts24:  'flex',
        ts46:  'flex',
        ts69:  'flex',
      })

    }


  }

  componentDidMount() {

    // navigator.geolocation.getCurrentPosition(
    //    (position) => {
      //      console.log(position);
      //      this.setState({
    //        latitude: position.coords.latitude,
    //        longitude: position.coords.longitude,
    //        error: null,
    //      });
    //    },
    //    (error) => this.setState({ error: error.message }),
    //    { enableHighAccuracy: false, timeout: 200000, maximumAge: 1000 },
    //  );


    }


    componentDidUpdate(prevProps, prevState){
      var hola = 0;
      var bhola = 0;
      if(prevState.dt.name !== this.state.dt.name){
        _.each(this.state.dt.cart, (val, key) => {
          hola = hola + (val.price * val.orderQty)
          bhola = bhola + parseInt(val.orderQty)
        })

        this.setState({
          total: hola,
          totalItems: bhola,
        })
      }

      if( hour != new Date().getHours()){
        hour = new Date().getHours();
      }
    }


  render() {

    return (
      <SafeAreaView style={{flex:1,backgroundColor:'#000'}}>
      <Container style={{backgroundColor:'#fff'}}>
      <OfflineNotice />
      <StatusBar hidden={true} />
      	<Header style={styles.header}>
			        <Left>
			        	<Button onPress={() => this.props.navigation.goBack()} style={{backgroundColor:'transparent',marginLeft:-20}} >
			          						        <Icon type='Ionicons' name='md-arrow-back' style={{color:'#fff',fontSize:32}} />
			        	</Button>
			        </Left>
			        <Body>
			        </Body>
			        <Right>

			        </Right>
		</Header>
        <ListItem itemDivider>
          <Text style={{ fontFamily: 'EncodeSansCondensed-Bold', fontSize: 15, color: '#000' }}>CHOOSE {this.state.nextDay} DELIVERY TIMING </Text>
        </ListItem>


          <ListItem onPress={ () => {
            this.setState({
              one : true,
              two : false,
              three : false,
              four : false,
              deliveryTiming : '12:00NOON--2:00PM',
              showPM : 'flex',
              showCardOD: 'flex',
              showCOD: 'flex',
            })
        }} style={{ display: this.state.ts122 }}>
            <Left>
            <Radio selected={this.state.one} selectedColor={"#5cb85c"} style={{marginTop:-3}} />
              <Text style={{ marginLeft: '2%', textAlign: 'left', fontSize: 12, fontFamily: 'EncodeSansCondensed-Bold', color: '#444' }}> {'12:00NOON to 02:00PM '}</Text>
            </Left>
          </ListItem>

        <ListItem onPress={() => {
          this.setState({
            two: true,
            one : false,
            three : false,
            four: false,
            deliveryTiming: '2:00PM--4:00PM',
            showPM : 'flex',
            showCardOD: 'flex',
            showCOD: 'flex',
          })
        }} style={{ display: this.state.ts46 }}>
            <Left>
            <Radio selected={this.state.two} selectedColor={"#5cb85c"} style={{marginTop:-3}} />
              <Text style={{ marginLeft: '2%', textAlign: 'left', fontSize: 12, fontFamily: 'EncodeSansCondensed-Bold', color: '#444' }}> {'2:00 PM to 4:00PM '}</Text>
            </Left>
          </ListItem>

        <ListItem onPress={() => {
          this.setState({
            two: false,
            one : false,
            three: true,
            four: false,
            deliveryTiming: '4:00PM--6:00PM',
            showPM : 'flex',
            showCardOD: 'flex',
            showCOD: 'none',
          })
        }} style={{ display: this.state.ts46 }}>
            <Left>
            <Radio selected={this.state.three} radioSelectedColor={"#5cb85c"} style={{marginTop:-3}} />
              <Text style={{ marginLeft: '2%', textAlign: 'left', fontSize: 12, fontFamily: 'EncodeSansCondensed-Bold', color: '#444' }}> {'4:00 PM to 6:00PM '}</Text>
            </Left>
          </ListItem>

        <ListItem onPress={() => {
          this.setState({
            two: false,
            one: false,
            three: false,
            four: true,
            deliveryTiming: '6:00PM--9:00PM',
            showPM : 'flex',
              showCardOD: 'none',
              showCOD: 'none',
          })
        }} style={{ display: this.state.ts69 }}>
          <Left>
            <Radio selected={this.state.four} selectedColor={"#5cb85c"} style={{marginTop:-3}} />
            <Text style={{ marginLeft: '2%', textAlign: 'left', fontSize: 12, fontFamily: 'EncodeSansCondensed-Bold', color: '#444' }}> {'6:00 PM to 9:00PM'} </Text>
          </Left>
        </ListItem>






        <Content style={{display:this.state.showPM}}>
        <ListItem itemDivider>
          <Text style={{fontFamily:'EncodeSansCondensed-Bold', fontSize:15, color:'#000'}}>CHOOSE PAYMENT METHOD </Text>
        </ListItem>

        <ListItem onPress={() => {
          if( this.state.deliveryTiming !== null){

            base.push('/liquorOrders', {
              data: {
                userid: this.state.userKey,
                date: this.state.date,
                amount: this.state.total,
                totalItems: this.state.totalItems,
                status: 'Confirmed',
                userCords: this.state.dt.address.userCords,
                deliveryPerson: 'mobileNo',
                item: this.state.dt.cart,
                address: this.state.dt.address,
                name: this.state.dt.name,
                mobile: this.state.dt.mobile,
                deliveryTiming: this.state.deliveryTiming,
                paymentMode : 'COD'
              }
            }).then(newLocation => {
              base.remove('/users/' + this.state.userKey + '/cart');
              this._sendMsg(newLocation.key.substring(14, ))
              move.navigate('orderSuccess');
              //console.log(newLocation)
            }).catch(err => {
              console.log(err)
            });

            this.setState({
              pm1 : !this.state.pm1,
              pm2: false,
              pm3 : false,
            })
          }else{
            Alert.alert('Select Delivery Timing...');
          }
        }} style={{ display: this.state.showCOD }}>
          <Left>
            <Radio selected={this.state.pm1} selectedColor={"#5cb85c"} style={{marginTop:-3}} />
            <Text style={{ marginLeft: '2%', textAlign: 'left', fontSize: 12, fontFamily: 'EncodeSansCondensed-Bold', color: '#444' }}> CASH / PAYTM ON DELIVERY </Text>
          </Left>
          <Right>
            <Icon style={{ fontSize: 25, color: '#000',marginRight:5 }} type="FontAwesome" name="rupee" />
          </Right>
        </ListItem>

        <ListItem onPress={() => {
            if (this.state.deliveryTiming !== null) {

              base.push('/liquorOrders', {
                data: {
                  userid: this.state.userKey,
                  date: this.state.date,
                  amount: this.state.total,
                  totalItems: this.state.totalItems,
                  status: 'Confirmed',
                  userCords: this.state.dt.address.userCords,
                  deliveryPerson: 'mobileNo',
                  item: this.state.dt.cart,
                  address: this.state.dt.address,
                  name: this.state.dt.name,
                  mobile: this.state.dt.mobile,
                  deliveryTiming: this.state.deliveryTiming,
                  paymentMode : 'CardOnDelivery'
                }
              }).then(newLocation => {
                base.remove('/users/' + this.state.userKey + '/cart');
                this._sendMsg(newLocation.key.substring(14, ))
                move.navigate('orderSuccess');
                //console.log(newLocation)
              }).catch(err => {
                console.log(err)
              });


              this.setState({
                pm1: false,
                pm2: !this.state.pm2,
                pm3: false,
              })
            } else {
              Alert.alert('Select Delivery Timing...');
            }
          }} style={{ display: this.state.showCardOD }}>
          <Left>
            <Radio selected={this.state.pm2} selectedColor={"#5cb85c"} style={{marginTop:-3}} />
            <Text style={{ marginLeft: '2%', textAlign: 'left', fontSize: 12, fontFamily: 'EncodeSansCondensed-Bold', color: '#444' }}> CARD ON DELIVERY </Text>
          </Left>
          <Right>
            <Icon style={{ fontSize: 25, color: '#000' }} type="Ionicons" name="ios-card" />
          </Right>
        </ListItem>

         <ListItem onPress={() => {
            if (this.state.deliveryTiming !== null) {
              this._onlinePayment(this.state.total);
              this.setState({
                pm1: false,
                pm2: false,
                pm3: !this.state.pm3,
              })
            } else {
              Alert.alert('Select Delivery Timing...');
            }
          }} >
          <Left>
            <Radio selected={this.state.pm3} selectedColor={"#5cb85c"} style={{marginTop:-3}} />
            <Text style={{ marginLeft: '2%', textAlign: 'left', fontSize: 12, fontFamily: 'EncodeSansCondensed-Bold', color: '#444' }}> ONLINE PAYMENT </Text>
          </Left>
          <Right>
            <Icon style={{ fontSize: 22, color: '#000' }} type="MaterialIcons" name="laptop" />
          </Right>
        </ListItem>

         <ListItem onPress={() => {
            if (this.state.deliveryTiming !== null) {

              this.props.navigation.navigate('PaymentsScreen',{userKey : this.state.userKey});

              this.setState({
                pm1: false,
                pm2: false,
                pm3: false,
                pm4: !this.state.pm4,
              })
              console.log(this.props);
            } else {
              Alert.alert('Select Delivery Timing...');
            }
          }} >
          <Left>
            <Radio selected={this.state.pm3} selectedColor={"#5cb85c"} style={{marginTop:-3}} />
            <Text style={{ marginLeft: '2%', textAlign: 'left', fontSize: 12, fontFamily: 'EncodeSansCondensed-Bold', color: '#444' }}> PayTM </Text>
          </Left>
          <Right>
            <Icon style={{ fontSize: 22, color: '#000' }} type="Entypo" name="wallet" />
          </Right>
        </ListItem>

        </Content>


      </Container>
      </SafeAreaView>
    );
  }
}


const styles = StyleSheet.create({
  header:{
    backgroundColor:'#000',
    height:65,
    paddingBottom:3,
  },
  mainBody:{
    backgroundColor:'#0c0e0f',
  },
  cardBg:{
    //backgroundColor:'#1e1e1e',
    elevation:1,
    margin:'1%',
  },

});


export default PaymentMode;