import * as React from 'react';
import { useState, useEffect } from 'react';
import { connect } from "react-redux";
import { StyleSheet, SafeAreaView, TouchableOpacity, Button, View, Text, Image, TextInput, Alert, Platform } 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 Elements from '../../components/elements.js';
import Theme from '../../components/theme.style.js';
import Icon from '../../components/icons.js';
import DB from '../../components/storage/';
import REQUEST from '../../components/api/';
import CustomInput from '../../components/custominput';
import { Container } from 'native-base';
import CustomSafeArea from '../../components/safeArea.component';

class ActivateAccountCard extends React.PureComponent {

  constructor(props) {
    super(props)
  }

  state = {
    loading: false,
    cardnumber: "",
    valid: false,
    phoneNumber: ""
  }

  componentDidMount() {
  }

  componentWillUnmount() {

  }

  handleRedirect = (res, uuid, SESSION) => {
    Alert.alert(
      "Information",
      "\n"+res.message,
      [{
        text: 'NO',
        style: 'cancel',
      },
        {
          text: 'YES', onPress: async () => {
            let phoneNumber = Theme.formatter.PMBL(this.state.phoneNumber)
            this.setState({ loading: true })
            this.validateMobilenumber(uuid, phoneNumber, success => {
              this.setState({ loading: false })
              this.props.navigation.navigate("LoginSendOTP", {
                lcard_uuid: success.data.user_id,
                mobile_number: this.state.phoneNumber,
                card_number: success.data.card_number
              })
            }, err => {
              Alert.alert(
                "Information",
                "\n"+err.message,
                [{
                  text: 'Cancel',
                  style: 'cancel',
                }],
                {cancelable: true}
              );
            })
          }
        },
      ],
      {cancelable: true}
    );
  }

  stripString = (regex, regexReplace ,string, replaceString) => {
    let validMobileNumber = regex.test(string);
    if(!validMobileNumber) {
      return null
    }
    return string.replace(regexReplace, replaceString)
  }

  setCardNumber = (cn) => {
    this.setState({ valid: cn.length == 16 ? true : false })
  }

  validateEnrollCard = async (successCallback, errorCallback) => {
    this.setState({ loading: true })
    let uuid = await DB.get("deviceUUID")
    let SESSION = await DB.session()

    await REQUEST("card_validation_enroll", "post", {}, {}, {
      card_number: this.state.cardnumber,
      deviceUUID: uuid
    }, 
    function(res){
      successCallback(res, uuid, SESSION)
    }, function(error){
      errorCallback(error)
    }, "Card", "Validate")
  }

  validateMobilenumber = async (uuid, phoneNumber, successCallback, errorCallback) => {
    await REQUEST("login_mobile", "post", {}, {}, {
      deviceUUID: uuid,
      mobile_number: phoneNumber
    }, function(data){
      successCallback(data)
    }, function(error){
      errorCallback(error)
    }, "Number", "Validate")
  }

  onSubmit = () => {
    if(this.state.valid) {
      NetInfo.netstatus(isConnected => {
        if(isConnected){
          this.validateEnrollCard((success, uuid, session) => {
            this.setState({ loading: false })
            if(success.status == 0 && success.data.code == 1) {
              Alert.alert("Information", '\n' + success.message)
            } else if(success.status == 0 && success.data.code == 2) {
              this.props.navigation.navigate("EnrollPin", {card_number: this.state.cardnumber, transactionType: "ActivateCard"})      
            } else if(success.status == 0 && success.data.code == 4) {
              this.setState({ phoneNumber: success.data.number })
              Platform.OS == 'ios' ? setTimeout(() => {
                this.handleRedirect(success, uuid, session)
              }, 300) :
              this.handleRedirect(success, uuid, session)
            } else{
              this.props.navigation.navigate("EnrollPin", {card_number: this.state.cardnumber, transactionType: "ActivateCard"})        
            } 
          }, err => {
            Alert.alert("Information", `\n${err.message}`);
            this.setState({ loading: false })
          })
        }else{
          Elements.nointernet2(this.props)
        }
      })
      
    }
  }

  render() {
    return (
        <CustomSafeArea>
          <Elements.loaderView 
            title="Validating"
            message="Please wait, validating your card number..."
            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="" navigation={this.props.navigation} main={false} backscreen={this.props.route.params ? this.props.route.params.screen : "Account"} back={true} />
          <View style={{flex: 1}}> 
            <View style={{width: '100%', height: 90, alignSelf: 'center', marginTop: 50}}>
              <Image source={Assets.logo.unioil} style={{width: '100%', height: '85%',  resizeMode: 'contain'}} />
            </View>
            <View style={{flex: 1, alignItems: 'center'}}>
              <Text style={{alignSelf: 'center', fontFamily: 'Arial', fontWeight: 'bold', fontSize: 25, padding: 15, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>Enroll Card</Text>
              <Text style={{alignSelf: 'center', marginTop: 5, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary, fontFamily: 'Arial', fontSize: 16}}>
                Have a new card?
              </Text>
              <Text style={{alignSelf: 'center', marginTop: 1, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary, fontFamily: 'Arial', fontSize: 16}}>
                Please enter your card number.
              </Text>
              <View style={{flexDirection: 'row', marginTop: 20, alignItems: 'center'}}> 
                <CustomInput
                  textColor={this.props.app_theme?.theme.colors.text}
                  isDarkMode={this.props.app_theme?.theme.dark}
                  onChangeText={(val) => {
                    this.setState({ cardnumber: val, valid: val.length == 16 ? true : false })
                  }}
                  onSubmitDone={this.onSubmit}
                />
              </View>
              <View style={{alignItems: 'center', justifyContent: 'flex-end', padding: 20, marginTop: 10}}>
                <TouchableOpacity onPress={() => this.onSubmit()} disabled={!this.state.valid} style={{padding: 20, paddingTop: 15, width: Theme.screen.w - 80, paddingBottom: 15, borderRadius: 10, backgroundColor: this.state.valid ? Theme.colors.primary : this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.border : Theme.colors.primary + "15"}}>
                  <Text style={{fontSize: 16, fontFamily: 'Arial', textAlign: 'center', color: '#fff'}}>Next</Text>
                </TouchableOpacity>
              </View>
            </View>
          </View>
        </CustomSafeArea>
      );
  }
}

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

export default connect(mapStateToProps, null)(ActivateAccountCard)

const styles = StyleSheet.create({
  input: {
    flex: 1, padding: 0, margin: 5, fontSize: 18, textAlign: 'center', borderBottomColor: Theme.colors.accent, borderBottomWidth: 1.5
  }
});