import * as React from 'react';
import { useState, useEffect } from 'react';
import { connect } from "react-redux";
import { SafeAreaView, ScrollView, TouchableOpacity, Button, View, Text, Linking } from 'react-native';
import {useNetInfo} from "@react-native-community/netinfo";
import NetInfo from "../../components/netstatus";
// import NetInfo from "@react-native-community/netinfo"
import CustomHeader from '../../components/header.js';
import Assets from '../../components/assets.manager.js';
import Theme from '../../components/theme.style.js';
import Elements from '../../components/elements.js';
import REQUEST from '../../components/api/';
import { ContactOptions, ContactOptionsWithParams } from '../../components/contact.action';
import DB, { session } from '../../components/storage/index';
import CustomSafeArea from '../../components/safeArea.component';


class LoginSendOTP extends React.PureComponent {

  constructor(props) {
    super(props)
  }

  state = {
    loading: false,
    data: {},
    contact: {},
    contactselect: false,
    openOptions: false
  }

  componentDidMount() {
    this.init()
  }

  componentWillUnmount() {

  }

  init = async () => {
    this.setState({ data: this.props.route.params })
    await DB.remove("is_guest")
  }

  onSaveSession = async () => {
    console.log(this.state.data)
    this.props.navigation.navigate("LoginOTP", this.state.data)
  }

  onSend = () => {
    NetInfo.netstatus(isConnected => {
      if(isConnected) {
        this.setState({ loading: true })
        this.requestOtp(success => {
          if(success.status == 1){
            this.setState({ loading: false })
            this.onSaveSession()
          }else{
            this.setState({ loading: false })
          }
        }, error => {})
      } else {
        Elements.nointernet2(this.props)
      }
    })
  }

  requestOtp = async (successCallback, errorCallback) => {
    let params = `lcard_uuid=${this.state.data.lcard_uuid}&mobile=${Theme.formatter.PMBL(this.state.data.mobile_number)}&is_resend=false`;
    await REQUEST("requestOTP", "get", {}, params, {}, 
    function(res){
      console.log(res)
      successCallback(res)
    }, function(error){
      console.log(res)
      errorCallback(error)
    })
  }

  render() {
    return (
      <CustomSafeArea>
        <Elements.loaderView 
          title="Validating"
          message="Please wait..."
          isDarkMode={this.props.app_theme?.theme.dark}
          backgroundColor={this.props.app_theme?.theme.colors.border}
          color={this.props.app_theme?.theme.colors.text}
          visible={this.state.loading} />
        <CustomHeader title="" menu={false} back={true} onBackPress={() => this.props.navigation.goBack()} navigation={this.props.navigation} />
        <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
          <Text style={{padding: 15, fontSize: 22, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary, fontWeight: 'bold'}}>Please Confirm</Text>
          <Text style={{padding: 5, fontSize: 16, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary, width: '85%', textAlign: 'center'}}>We will send you a One Time Passcode to</Text>
          <Text style={{padding: 15, fontSize: 15, color: Theme.colors.accent, width: '85%', textAlign: 'center'}}>{Theme.formatter.ENCMBL(this.state.data.mobile_number || "+639000000000")}</Text>
          <TouchableOpacity onPress={() => this.onSend()} style={{backgroundColor: Theme.colors.primary, padding: 15, width: '80%', borderRadius: 10, elevation: 3}}>
            <Text style={{textAlign: 'center', color: "#fff", fontSize: 16}}>Send me the code</Text>
          </TouchableOpacity>
          <View style={{flexDirection: 'row', width: '80%', padding: 15}}>
            <Text style={{flex: 4, textAlign: 'right', color: this.props.app_theme?.theme.colors.text}}>Not your mobile number? </Text>
            <TouchableOpacity onPress={() => this.setState({ openOptions: true })} style={{flex: 2}}>
              <Text style={{textAlign: 'center', color: Theme.colors.primary}}>Contact Us</Text>
            </TouchableOpacity>
          </View>
        </View>

        <ContactOptionsWithParams
          params={{ cardnumber: this.state.data.cardnumber }}
          isOpen={this.state.openOptions}
          onClose={() => this.setState({ openOptions: false })}
        />
      </CustomSafeArea>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    app_theme: state.appThemeReducer.theme
  }
}

export default connect(mapStateToProps, null)(LoginSendOTP);