import * as React from 'react';
import { 
  StyleSheet, 
  TouchableOpacity, 
  View, 
  Text, 
  Image,
  Alert, 
  Keyboard, 
  ImageBackground 
} from 'react-native';
import { ContactOptions } from '../../components/contact.action';
import { connect } from "react-redux";
import DeviceInfo from "react-native-device-info";
import NetInfo from "../../components/netstatus";
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 REQUEST from '../../components/api/';
import DB from '../../components/storage/';
import CustomInput from '../../components/custominput';
import CustomSafeArea from '../../components/safeArea.component';
import { Actionsheet, StatusBar } from 'native-base';
import elements from '../../components/elements.js';

class AddAccountCard extends React.PureComponent {

  constructor(props) {
    super(props)
  }

  state = {
    loading: false,
    focus: false,
    activeInput: null,
    cardnumber: "",
    deviceUUID: "",
    valid: false,
    mobilenumber: "",
    agree: false,
    openOptions: false
  }

  componentDidMount() {
    if(this.props.route.params?.reset){
      this.reset()
    }
    this.init()
  }

  componentWillUnmount() {
    
  }

  init = async () => {
    await DB.reset()
    this.setState({ deviceUUID: await DB.get("deviceUUID") })
  }

  reset = () => {
    this.setState({
      loading: false,
      focus: false,
      activeInput: null,
      cardnumber: "",
      deviceUUID: "",
      valid: false,
      mobilenumber: "",
      agree: false
    })
  }

  onErrorWarning = (success) => {
    console.log(success)
    if(Platform.OS == 'ios'){
      setTimeout(() => {
        Alert.alert("Error", '\n' + success.message)
      }, 700)
    }else{
      Alert.alert("Error", success.message)
    }
  }

  onSubmit = () => {
    Keyboard.dismiss();
    NetInfo.netstatus(isConnected => {
      if(isConnected) {
        this.setState({ loading: true })
        this.validateMobileNumber(success => {
          console.log(success)
          if(success.data.is_valid == 1 && success.status == 1){
            this.setState({ loading: false })
            this.props.navigation.navigate("LoginSendOTP", {
              lcard_uuid: success.data.user_id,
              mobile_number: Theme.formatter.MBNF(this.state.mobilenumber, 63),
              card_number: success.data.card_number
            })
          } else {
            this.setState({ loading: false })
            this.onErrorWarning(success)
          }
        }, error => {
          this.setState({ loading: false })
          console.log(error)
        })
      } else {
        this.setState({ loading: false })
        Elements.nointernet2(this.props)
      }
    })
  }

  onAgree = () => {
    this.setState({ agree: this.state.agree == false ? true : false })
  }

  validateMobileNumber = async (successCallback, errorCallback) => {
    let phoneNumber = Theme.formatter.MBNF(this.state.mobilenumber, "")
    if(phoneNumber == null) {
      setTimeout(() => {
        Alert.alert("Error", '\n' + "Invalid mobile number")
      }, 700)
      this.setState({ loading: false })
      return
    }
    
    await REQUEST("login_mobile", "post", {}, {}, {
      deviceUUID: this.state.deviceUUID,
      mobile_number: phoneNumber
    }, function(data){
      successCallback(data)
    }, function(error){
      errorCallback(error)
    })
  }

  render() {
    let version = `v${DeviceInfo.getReadableVersion()}`
    return (
      <CustomSafeArea customStatusBar={true}>
        <ImageBackground 
          source={Assets.bg.login_bg}
          style={{ flex: 1 }}>
            <View style={{flex: 1}}>
              <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} />
              <View style={{flex: 1}}> 
                <View style={{width: '100%', height: 90, alignSelf: 'center', marginTop: 50 }}>
                  <Image source={Assets.logo.unioil} style={{width: '100%',  height: '83%', resizeMode: 'contain'}} />
                </View>
                <View style={{flex: 1, alignItems: 'center'}}>
                  <Text style={{alignSelf: 'center', fontFamily: 'Arial', fontSize: 25, paddingLeft: 15, paddingRight: 15, paddingBottom: 15, color: Theme.colors.white, fontStyle: 'italic' }}>Make Life Rewarding</Text>
                  <Text style={{alignSelf: 'center', marginTop: 5, color: Theme.colors.white, fontFamily: 'Arial', fontSize: 16}}>
                    Enter your mobile number.
                  </Text>
                  <View> 
                    <CustomInput 
                      cantStartWithZero={true}
                      isMobileNumber={true}
                      textColor={Theme.colors.white}
                      onChangeText={(val) => {
                        let value = val.includes(".") ? val.replace(".", "") : val
                        this.setState({ mobilenumber: value, valid: value.length == 13 ? true : false, agree: false })
                      }}
                    />
                    <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
                      <TouchableOpacity onPress={() => this.state.valid ? this.onAgree() : null} style={{flex: 0, padding: 8}}>
                        {!this.state.agree || !this.state.valid ? <Icon.Feather name="square" size={20} /> : <Icon.AntDesign name="checksquare" color={Theme.colors.primary} size={20} />}
                      </TouchableOpacity>
                      <View style={{flexDirection: 'row', padding: 8}}>
                        <Text style={{ color: Theme.colors.white }}>I agree to Unioil's </Text>
                        <TouchableOpacity onPress={() => this.props.navigation.navigate("TermsConditions")}>
                          <Text style={{color: Theme.colors.white, textDecorationLine: 'underline'}}>Data Privacy Policy.</Text>
                        </TouchableOpacity>
                      </View>
                    </View>
                  </View>
                  
                  <View style={{alignItems: 'center', justifyContent: 'flex-end', padding: 20, marginTop: 10}}>
                    <TouchableOpacity onPress={() => this.onSubmit()} disabled={(!this.state.agree || !this.state.valid)} style={{padding: 20, paddingTop: 15, width: Theme.screen.w * .73, paddingBottom: 15, borderRadius: 10, backgroundColor: (this.state.agree && this.state.valid) ? Theme.colors.primary : Theme.colors.darkGray + "40"}}>
                      <Text style={{fontSize: 16, fontFamily: 'Arial', textAlign: 'center', color: '#fff'}}>Log In</Text>
                    </TouchableOpacity>
                  </View>

                  <View style={{alignItems: 'center'}}>
                    <Text style={{fontSize: 16, fontFamily: 'Arial', color: Theme.colors.textPrimary, color: '#fff'}}>or</Text>
                  </View>
                
                  <View style={{alignItems: 'center', justifyContent: 'flex-end', padding: 15, marginTop: 5}}>
                    <TouchableOpacity onPress={() => this.props.navigation.navigate("EnrollActivate", {screen: "Login"}) } style={{padding: 15, paddingTop: 12, width: Theme.screen.w * .65, paddingBottom: 12, borderRadius: 10, borderWidth: 2, borderColor: Theme.colors.white}}>
                      <Text style={{fontSize: 16, fontFamily: 'Arial', textAlign: 'center', color: Theme.colors.white}}>Activate your Card</Text>
                    </TouchableOpacity>
                  </View>
                  <View style={{alignItems: 'center', justifyContent: 'flex-end', padding: 15, paddingTop: 0}}>
                    <TouchableOpacity onPress={() => this.props.navigation.navigate("ApplySelectCard") } style={{padding: 15, paddingTop: 12, width: Theme.screen.w * .65, paddingBottom: 12, borderRadius: 10, borderWidth: 2, borderColor: Theme.colors.white}}>
                      <Text style={{fontSize: 16, fontFamily: 'Arial', textAlign: 'center', color: Theme.colors.white}}>Apply for a Card</Text>
                    </TouchableOpacity>
                  </View> 
                  <TouchableOpacity onPress={() => this.props.navigation.navigate("TermsConditions") } style={{paddingHorizontal: 15, width: Theme.screen.w - 80, paddingBottom: 12}}>
                    <Text style={{fontSize: 16, fontFamily: 'Arial', textAlign: 'center', color: Theme.colors.white}}>Enter as Guest</Text>
                  </TouchableOpacity>
                </View>
              </View>
            </View>
            <View style={{flexDirection: 'row', marginBottom: 5}}>
              <TouchableOpacity onPress={() => {this.setState({ openOptions: true })}} style={{padding: 15, alignItems: 'flex-start', flex: 1}}>
                <Text style={{fontSize: 16, fontFamily: 'Arial', textAlign: 'left', color: Theme.colors.white}}>Contact Us</Text>
              </TouchableOpacity>
              <TouchableOpacity onPress={() => {}} style={{padding: 15, justifyContent: 'flex-end', flex: 1}}>
                <Text style={{fontSize: 16, fontFamily: 'Arial', textAlign: 'right', color: Theme.colors.white}}>{version}</Text>
              </TouchableOpacity>
            </View>
            
            <ContactOptions isOpen={this.state.openOptions} onClose={() => this.setState({ openOptions: false })}/>
        </ImageBackground> 
      </CustomSafeArea>
    )
  }
}

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

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