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 "@react-native-community/netinfo";
import NetInfo from "../../components/netstatus";
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 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,
    mobile_number: null
  }

  componentDidMount() {
    this.init()
  }

  componentWillUnmount() {

  }

  init = async () => {
    this.setState({ data: this.props.route.params.data, mobile_number: this.props.route.params.mobile_number })
    console.log(this.props.route.params)
  }

  onSend = () => {
    NetInfo.netstatus(isConnected => {
      if(isConnected) {
        this.requestOTP(success => {
          this.setState({ loading: false })
          console.log(success)
          if(success.status == 1) {
            this.props.navigation.navigate("AccountOtp", {
              data: this.state.data, 
              callback: this.props.route.params?.callback, 
              type: this.props.route.params?.type
            })
          }
        }, error => {
          this.setState({ loading: false })
        })
      } else {
        Elements.nointernet2()
      }
    })
  }

  requestOTP = async (successCallback, errorCallback) => {
    this.setState({ loading: true })
    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){
      successCallback(res)
    }, function(error){
      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={() => ContactOptionsWithParams({ cardnumber: this.state.data.card_number })} style={{flex: 2}}>
                <Text style={{textAlign: 'center', color: Theme.colors.primary}}>Contact Us</Text>
              </TouchableOpacity>
            </View>
          </View>
        </CustomSafeArea>
      );
  }
}

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

export default connect(mapStateToProps, null)(LoginSendOTP)

// export default function LoginSendOTP(navigation) {

//   const [loading, setloading] = useState(false)
//   const [data, setdata] = useState({})
//   const [contact, setcontact] = useState({})
//   const [contactselect, setcontactselect] = useState(false)

//   const init = async () => {
//     console.log(navigation)
//     await setdata(navigation.route?.params.data)
//     let session = await DB.session()
//     console.log("SESSION", session)
//   }

//   useEffect(() => {
//     init()
//   }, [])

//   const encyptNumber = (contact) => {
//     let replacement = "****"
//     let index = 6
//     return contact.substr(0, index) + replacement+ contact.substr(index + replacement.length)
//   }

//   const prepMobileNumber = (number) => {
//     return number.substr(0, 0) + "" + number.substr(2)
//   }

//   const onSend = async () => {
//     setloading(true)
//     let params = `lcard_uuid=${data.lcard_uuid}&mobile=${Theme.formatter.PMBL(data.mobile_number)}&is_resend=false`;
//     await REQUEST("requestOTP", "get", {}, params, {}, 
//     function(res){
//       if(res.status == 1){
//         setloading(false)
//         navigation.navigation.navigate("AccountOtp", {data: data, callback: navigation.route.params?.callback, type: navigation.route.params?.type})
//       }else{
//         setloading(false)
//         alert(res.data)
//       }
//       console.log("RESPONSE: " , res)
//     }, function(error){
//       setloading(false)  
//       console.log(error)
//     })
//   }

//   const loadContactInfo = async () => {
//     await REQUEST("contact_us", "get", {}, {}, {}, 
//       async (res) => {
//         if(res.status == 1 && res.data){
//           await setcontact(res.data)
//           setcontactselect(true)
//           console.log("COntact Details", contact)
//         }else{
//           console.log(res.message, res.data)
//         }
//       }, function(error){  
//         console.log(error)
//     })
//   }

//   return (
//     <SafeAreaView style={{flex: 1}}>
//       <Elements.loader visible={loading} />
      
//       <CustomHeader title="" menu={false} back={true}  onBackPress={() => navigation.navigation.goBack()} navigation={navigation} />
//       <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
//         <Text style={{padding: 15, fontSize: 22, color: Theme.colors.textPrimary, fontWeight: 'bold'}}>Please Confirm</Text>
//         <Text style={{padding: 5, fontSize: 16, color: 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(data.mobile_number || "+639000000000")}</Text>
//         <TouchableOpacity onPress={() => {
//           NetInfo.fetch().then(state => {
//             console.log("Connection type", state.type);
//             console.log("Is connected?", state.isConnected);
//             if(state.isConnected){
//               onSend()
//             }else{
//               Elements.nointernet2()
//             }
//           })
//         }} 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'}}>Not your mobile number? </Text>
//           <TouchableOpacity onPress={() => ContactOptions()} style={{flex: 2}}>
//             <Text style={{textAlign: 'center', color: Theme.colors.primary}}>Contact Us</Text>
//           </TouchableOpacity>
//         </View>
//       </View>
//     </SafeAreaView>
//   );
// }