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

class ActivateAccountCard extends React.Component {

  constructor(props) {
    super(props)
  }

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

  componentDidMount() {

  }

  componentWillUnmount() {

  }

  handleRedirect = (res, uuid, SESSION) => {
    Alert.alert(
      'Error',
      "\n"+res.message+'\n',
      [
        {
          text: 'No',
          style: 'cancel',
        },
        {
          text: 'YES', onPress: async () => {
            this.props.navigation.navigate("AccountBirthdate", {
              cardnumber: this.state.cardnumber,
              deviceUUID: uuid,
              callback: this.props.route.params.callback,
              type: "addcard"
            })              
          }
        },
      ],
      {cancelable: true}
    );
  }

  requestCardValidEnroll = async (successCallback, errorCallback) => {
    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)
    })
  }

  validateCardEnroll = () => {
    this.setState({ loading: true })
    this.requestCardValidEnroll((success, uuid ,SESSION) => {
      this.setState({ loading: false })
      if(success.status == 0 && success.data.code == 2) {
        this.props.navigation.navigate("AccountEnrollPin", {card_number: this.state.cardnumber, callback: this.props.route.params.callback, type: this.props.route.params.type})
      } else if(success.status == 0 && success.data.code == 4) {
        Platform.OS == 'ios' ? setTimeout(() => {
          this.handleRedirect(success, uuid, SESSION)
        }, 300) :
        this.handleRedirect(success, uuid, SESSION)
      } else {
        this.props.navigation.navigate("AccountEnrollPin", {card_number: this.state.cardnumber, callback: this.props.route.params.callback, type: this.props.route.params.type})
      }
      console.log(success)
    }, error => {
      this.setState({ loading: false })
      Alert.alert("Error", error.message)
    })
  }

  onSubmit = () => {
    if(this.state.valid) {
      NetInfo.netstatus(isConnected => {
        if(isConnected){
          this.validateCardEnroll()
        } else {
          Elements.nointernet2()
        }
      })
    }
  }

  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="" navigation={this.props.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: 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>
      </Container>
    </CustomSafeArea>
    )
  }
}

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

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