import * as React from 'react';
import { useState } from 'react';
import { 
  StyleSheet, 
  TouchableOpacity,
  View, 
  Text, 
  Image, 
  Alert, 
  Platform 
} from 'react-native';
import { Container } from 'native-base';
import NetInfo from "@react-native-community/netinfo";
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 DB from '../../components/storage/';
import REQUEST from '../../components/api/';
import CustomInput from '../../components/custominput';
import CustomSafeArea from '../../components/safeArea.component.js';

export default function ActivateAccountCard(navigation) {

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

  const handleRedirect = (res, uuid, SESSION) => {
    Alert.alert(
      "Information",
      "\n"+res.message,
      [{
        text: 'No',
        style: 'cancel',
      },
        {
          text: 'YES', onPress: async () => {
            if(SESSION.token){
              DB.logout(function(res){
                if(res.status == 1){
                  navigation.navigation.navigate("LoginBirthday", {
                    cardnumber: cardnumber,
                    deviceUUID: uuid,
                    screen: "Account"
                  })
                }
              }, function(error){
                console.log(error)
              })
            }else{
              navigation.navigation.navigate("LoginBirthday", {
                cardnumber: cardnumber,
                deviceUUID: uuid,
                screen: "Login"
              })
            }                
          }
        },
      ],
      {cancelable: true}
    );
  }

  const Submit = async (props) => {
    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)
      if(res.status == 0 && res.data.code == 2){
        navigation.navigation.navigate("EnrollPin", {card_number: cardnumber})
      }else if(res.status == 0 && res.data.code == 4){
        Platform.OS == 'ios' ? setTimeout(() => {
          handleRedirect(res, uuid, SESSION)
        }, 300) :
        handleRedirect(res, uuid, SESSION)       
      }else{
        //PROCEED NOW!!!!
        navigation.navigation.navigate("EnrollPin", {card_number: cardnumber})
      }
    }, function(err){
      setloading(false)
      Alert.alert("Information", `\n${err.message}`);
    }, "CardValidationEnroll", "Submit")
  }

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

  return (
    <CustomSafeArea>
      <Elements.loader visible={loading} />
      <CustomHeader title="" navigation={navigation} main={false} onBackPress={() => this.props.navigation.goBack()} back={true} />
      <Container style={{flex: 1}}>
      <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 => {
                if(state.isConnected){
                  onSubmit()
                }else{
                  Elements.nointernet2(navigation)
                }
              })
            }} 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>
      </Container>

    </CustomSafeArea>
  );
}

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