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() {
    console.log(this.props)
  }

  componentWillUnmount() {

  }

  handleRedirect = (res, uuid, SESSION) => {
    Alert.alert(
      'Error',
      "\n"+res.message+'\n',
      [{
        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
              })
            }, error => {
              Alert.alert(
                'Error',
                "\n"+res.message+'\n',
                [{
                  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){
      console.log(res)
      successCallback(res, uuid, SESSION)
    }, function(error){
      console.log(error)
      errorCallback(error)
    })
  }

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

  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) {
              Platform.OS == 'ios' ? setTimeout(() => {
                Alert.alert("Error", success.message)
              }, 300) : Alert.alert("Error", 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"})        
            } 
          }, error => {
            this.setState({ loading: false })
          })
        }else{
          Elements.nointernet2()
        }
      })
      
    }
  }

  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 })
                  }}
                />
              </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)

// export default function ActivateAccountCard(navigation) {

//   const [loading, setloading] = useState(false);
//   const [cardnumber, setcardnumber] = useState("");
//   const [valid, setvalid] = useState(false);

//   const setCardNumber = (cn) => {
//     console.log(cn.length, cn)
//     setvalid(cn.length == 16 ? true : false)
//   }

//   const handleRedirect = (res, uuid, SESSION) => {
//     Alert.alert(
//       'Error',
//       "\n"+res.message+'\n',
//       [{
//         text: 'No',
//         style: 'cancel',
//       },
//         {
//           text: 'YES', onPress: async () => {
//             navigation.navigation.navigate("LoginBirthday", {
//               cardnumber: cardnumber,
//               deviceUUID: uuid
//             }) 
//           }
//         },
//       ],
//       {cancelable: true}
//     );
//   }

//   const Submit = async () => {
//     setloading(true)
//     let uuid = await DB.get("deviceUUID")
//     let SESSION = await DB.session()
//     await REQUEST("card_validation_enroll", "post", {}, {}, {
//         card_number: cardnumber,
//         deviceUUID: uuid
//       }, function(res){
//       setloading(false)
//       console.log("RES", res)
//       if(res.status == 0 && res.data.code == 2){
//         // Platform.OS == 'ios' ? setTimeout(() => {
//         //   Alert.alert("Error", "\n" + res.message)
//         // }, 300) :
//         // Alert.alert("Error", "\n" + res.message)
//         // handleRedirect(res, uuid, SESSION)  
//         navigation.navigation.navigate("EnrollPin", {card_number: cardnumber})      
//       }else if(res.status == 0 && res.data.code == 4){
//         console.log("RES", res)
//         Platform.OS == 'ios' ? setTimeout(() => {
//           handleRedirect(res, uuid, SESSION)
//         }, 300) :
//         handleRedirect(res, uuid, SESSION)
//       }
//       else{
//         //PROCEED NOW!!!!
//         navigation.navigation.navigate("EnrollPin", {card_number: cardnumber})        
//       }

//     }, function(error){
//       console.log(error)
//       setloading(false)
//     })
//   }

//   const onSubmit = () => {
//     if(valid) Submit()
//     // if(valid) alert("Card number is " + cardnumber)    
//   }

//   return (
//     <SafeAreaView style={{flex: 1}}>
//       <Elements.loader visible={loading} />
//       <CustomHeader title="" navigation={navigation} main={false} backscreen={navigation.route.params ? navigation.route.params.screen : "Account"} back={true} />
//       <Content>
//       <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: Theme.colors.textPrimary}}>Enroll Card</Text>
//           <Text style={{alignSelf: 'center', marginTop: 5, color: Theme.colors.textPrimary, fontFamily: 'Arial', fontSize: 16}}>
//             Have a new card?
//           </Text>
//           <Text style={{alignSelf: 'center', marginTop: 1, color: Theme.colors.textPrimary, fontFamily: 'Arial', fontSize: 16}}>
//             Please enter your card number.
//           </Text>
//           <View style={{flexDirection: 'row', marginTop: 20, alignItems: 'center'}}> 
            
//             <CustomInput 
//               onChangeText={(val) => {
//                 setcardnumber(val)
//                 setvalid(val.length == 16 ? true : false)
//               }}
//             />

//           </View>
          
//           <View style={{alignItems: 'center', justifyContent: 'flex-end', padding: 20, marginTop: 10}}>
//             <TouchableOpacity onPress={() => {
//               NetInfo.fetch().then(state => {
//                 console.log("Connection type", state.type);
//                 console.log("Is connected?", state.isConnected);
//                 if(state.isConnected){
//                   onSubmit()
//                 }else{
//                   Elements.nointernet2()
//                 }
//               })
//             }} disabled={!valid} style={{padding: 20, paddingTop: 15, width: Theme.screen.w - 80, paddingBottom: 15, borderRadius: 10, backgroundColor: valid ? Theme.colors.primary : Theme.colors.primary + "15"}}>
//               <Text style={{fontSize: 16, fontFamily: 'Arial', textAlign: 'center', color: '#fff'}}>Next</Text>
//             </TouchableOpacity>
//           </View>
      
//         </View>
//       </View>
//       </Content>

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

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