import * as React from 'react';
import { useRef } from 'react';
import { 
  TouchableOpacity, 
  View, 
  Text, 
  TextInput,
  Alert, 
  Platform,
  ScrollView
} from 'react-native';
import { connect } from "react-redux";
import CustomHeader from '../../../components/header.js';
import Elements from '../../../components/elements.js';
import Theme from '../../../components/theme.style.js';
import Icon from '../../../components/icons.js';
import moment from 'moment';
import DB from '../../../components/storage/';
import REQUEST from '../../../components/api/';
import CustomSafeArea from '../../../components/safeArea.component.js';
import { KeyboardAvoidingView } from 'native-base';

const CustomInput = (props) => {

  const _textInput = useRef(null);
  
  const titlecolor = props.current == props.index && props.focus ? Theme.colors.accent : Theme.colors.darkGray
  const bordercolor = props.error ? Theme.colors.primary : (props.focus && props.current == props.index ? Theme.colors.accent : 'gray')
  const borderwidth = props.error ? 1.6 : (props.focus && props.current == props.index ? 1.5 : 1)

  const style = {
    container: {flexDirection: 'row', width: '80%', marginTop: props.top || 30, alignItems: 'center'},
    title: {fontSize: 12, color: titlecolor, marginTop: -25, marginBottom: 15},
    input: {width: '100%', fontSize: 16, padding: 0, borderBottomColor: bordercolor, borderBottomWidth: borderwidth, color: props.isDarkMode ? props.textColor : Theme.colors.black},
    error: {fontSize: 12, color: Theme.colors.primary, marginTop: 5, marginBottom: 15}
  }

  return (
    <View style={style.container}> 
      <View style={{flex: 1}}>
        {props.current >= props.index ? 
          <Text style={style.title}>
            {props.title}
          </Text> : null}
        <TextInput
          ref={_textInput}
          keyboardType={props.keyboardType || null}
          maxLength={props.maxlength || null} 
          placeholder={props.placeholder || props.title || null}
          placeholderTextColor={props.isDarkMode ? Theme.colors.darkGray : Theme.colors.gray}
          value={props.value || null}
          onFocus={props.onFocus || null}
          onChangeText={props.onChangeText || null}
          style={style.input} 
        />
        {props.error ? <Text style={style.error}>{props.errorMessage}</Text> : null }
      </View>
    </View>)
}

class ApplyForm extends React.Component {

  constructor(props) {
    super(props)
    this.cardnumber = ""
  }

  state = {
    loading: false,
    card: null,
    datepicker: false,
    focus: false,
    activeInput: 0,
    agree: false,
    errors: null,
    fname: null,
    lname: null,
    email: null,
    birthdate: "",
    number: null,
    valid: false,
    validEmail: true,
    validPhone: true,
  }

  componentDidMount() {
    this.init()
  }

  componentWillUnmount() {

  }

  setCardNumber = () => {
    this.setState({ valid: this.state.cardnumber.length == 15 ? true : false })
  }

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

  // validateEmail = () => {
  //   return this.state.email.includes("@")
  // }

  validateEmail = () => {
    let regEx = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/
    return regEx.test(this.state.email)
  }

  validateNumber = () => {
    return this.state.number != null ? this.state.number.length > 11 : false
  }

  init = async () => {
    this.setState({ card: this.props.route?.params || {} })
    await DB.remove("is_guest")
  }

  //registerAndValidate
  onRegisterAndValidate = async (successCallback, errorCallback) => {
    //this.setState({ loading: true })
    let uuid = await DB.get("deviceUUID")
    let body = {
      birthdate: Theme.formatter.DT4API(this.state.birthdate || ""),
      cardtype_uuid: this.state.card.card_uuid,
      deviceUUID: uuid,
      email: this.state.email,
      firstname: this.state.fname,
      id_number: this.state.card.id_number,
      lastname: this.state.lname,
      mobile: Theme.formatter.PMBL(this.state.number.substr(1, this.state.number.length-1) || "")
    }
    
    await REQUEST("registerAndValidate", "post", {}, {}, body, async (signup) => {
      console.log("APPLY RESULT", signup.data)
      if(signup.status == 1){
        successCallback(signup.data,body);
      }else{
        errorCallback(signup);
      }
    }, function(error){
      console.log(signup)
      errorCallback(error)
    })
  }

  onRegisterAndValidate = async (successCallback, errorCallback) => {
    //this.setState({ loading: true })
    let uuid = await DB.get("deviceUUID")
    let body = {
      birthdate: Theme.formatter.DT4API(this.state.birthdate || ""),
      cardtype_uuid: this.state.card.card_uuid,
      deviceUUID: uuid,
      email: this.state.email,
      firstname: this.state.fname,
      id_number: this.state.card.id_number,
      lastname: this.state.lname,
      mobile: Theme.formatter.PMBL(this.state.number.substr(1, this.state.number.length-1) || "")
    }
    
    await REQUEST("registerAndValidate", "post", {}, {}, body, async (signup) => {
      console.log("APPLY RESULT", signup.data)
      if(signup.status == 1){
        successCallback(signup.data,body);
      }else{
        errorCallback(signup);
      }
    }, function(error){
      console.log(signup)
      errorCallback(error)
    })
  }

  onValidateAndActivate = async (successCallback, errorCallback) => {
    this.setState({ loading: true })
    let uuid = await DB.get("deviceUUID")
    let body = {
      birthdate: Theme.formatter.DT4API(this.state.birthdate || ""),
      cardtype_uuid: this.state.card.card_uuid,
      deviceUUID: uuid,
      email: this.state.email,
      firstname: this.state.fname,
      id_number: this.state.card.id_number,
      lastname: this.state.lname,
      mobile: Theme.formatter.PMBL(this.state.number.substr(1, this.state.number.length-1) || "")
    }
    
    await REQUEST("submitRegistration", "post", {}, {}, body, async (signup) => {
      console.log("APPLY RESULT", signup.data)
      if(signup.status == 1){
        await REQUEST("user_profile", "get", {
          Authorization: "Bearer " + signup.data.token,
          card_number: ''
        }, {}, {}, function(act){
          console.log(act)
          successCallback(act, signup, body)
        }, (err) => {
          console.log(err)
          errorCallback(err)
        });
      } else if(signup.status == 0 && Object.keys(signup.data).length == 0) {
        console.log(signup)
        errorCallback(signup)
      } else {
        console.log(signup)
        errorCallback(signup)
      }
    }, function(error){
      console.log(signup)
      errorCallback(error)
    })
  }

  onApplyCardSubmit = async (successCallback, errorCallback) => {
    this.setState({ loading: true })
    let uuid = await DB.get("deviceUUID")
    let body = {
      birthdate: Theme.formatter.DT4API(this.state.birthdate || ""),
      cardtype_uuid: this.state.card.card_uuid,
      deviceUUID: uuid,
      email: this.state.email,
      firstname: this.state.fname,
      id_number: this.state.card.id_number,
      lastname: this.state.lname,
      mobile: Theme.formatter.PMBL(this.state.number.substr(1, this.state.number.length-1) || "")
    }
    
    await REQUEST("apply", "post", {}, {}, body, async (signup) => {
      console.log("APPLY RESULT", signup.data)
      if(signup.status == 1){
        await REQUEST("user_profile", "get", {
          Authorization: "Bearer " + signup.data.token,
          card_number: ''
        }, {}, {}, function(act){
          console.log(act)
          successCallback(act, signup, body)
        }, (err) => {
          console.log(err)
          errorCallback(err)
        });
      } else if(signup.status == 0 && Object.keys(signup.data).length == 0) {
        console.log(signup)
        errorCallback(signup)
      } else {
        console.log(signup)
        errorCallback(signup)
      }
    }, function(error){
      console.log(signup)
      errorCallback(error)
    })
  }
  
  requestMobileOtp = async (mobilenum, successCallback, errorCallback) => {
    await REQUEST("mobileOTP", "get", {}, `mobile=${mobilenum}`, {}, function(otp){
      successCallback(otp)
    }, function(error){
      errorCallback(error)
    })
  }

  openActivityForResult = async (data) => {
    data.onValid = (result) => {
      this.setState({ loading: true })
      if(result) {
        this.onValidateAndActivate(async (success, info, body) => {
          const sessionData = {
            token: info.data.token,
            session: {
              birthdate: body.birthdate,
              card_number: success.data.card_number,
              lcard_uuid: success.data.lcard_uuid,
              mobile_number: body.mobile
            }
          }
          console.log(success)
          await DB.login(sessionData, () => {
            this.setState({ loading: false })
            let data = {
              sessiondata: sessionData.session,
              token: info.data.token,
              transactionType: "ApplyCard"
            }
            if(success.data.mpin == undefined || success.data.mpin == "") {
              this.props.navigation.navigate("Setmpin", data)
            } else {
              this.props.navigation.navigate("OnBoarding", { token: info.data.token })
            }
          }, (err) => {
            this.setState({ loading: false })
          })
        }, error => {
          if(error.status == 0 && Object.keys(error.data).length == 0) {
            console.log(error)
            if(error.message.includes("Mobile number")){
              this.setState({ loading: false, errors: {mobile: [error.message]} })
            }else{
              Platform.OS == 'ios' ? setTimeout(() => {
                Alert.alert("Error", error.message)
              }, 300) :
              Alert.alert("Error", error.message)
              this.setState({ loading: false, errors: null })
            }
          } else if(Object.keys(error.data).length > 0) {
            console.log(error)
            Platform.OS == 'ios' ? setTimeout(() => {
              Alert.alert("Error", error.data)
            }, 300) :
            Alert.alert("Error", error.data)
            this.setState({ loading: false, errors: error.data })
          } else {
            console.log(error)
            Platform.OS == 'ios' ? setTimeout(() => {
              Alert.alert("Error", error.message)
            }, 300) :
            Alert.alert("Error", error.message)
            this.setState({ loading: false, errors: error })
          }
        });
      }
    }
    this.props.navigation.navigate("ApplyOTP", data)
  }

  onSubmit = () => {
    if(this.state.valid){
      let errs = {}
      let bdayElapsed = moment(this.state.birthdate).fromNow(true).split(" ")
      if(!this.state.fname) errs = Object.assign({"firstname": ["The firstname field is required."]}, errs)
      if(!this.state.lname) errs = Object.assign({"lastname": ["The lastname field is required."]}, errs)
      if(!this.state.birthdate) errs = Object.assign({"birthdate": ["The birthdate field is required."]}, errs)
      if(bdayElapsed[1] != 'years' || bdayElapsed[1] == 'years' && bdayElapsed[0] < 18) errs = Object.assign({"birthdate": ["You must be at least 18 years old to join the Loyalty Program"]}, errs)
      if(!this.state.number) errs = Object.assign({"mobile": ["The mobile field is required."]}, errs)
      if(!this.state.email) errs = Object.assign({"email": ["The email field is required."]}, errs)
      if(this.state.number.length < 11) errs = Object.assign({"mobile": ["Please enter your 10-digit Mobile Phone Number"]}, errs)
      if(!this.validateEmail()) errs = Object.assign({"email": ["The email address is invalid"]}, errs)

      this.setState({ errors: errs })
      if(Object.keys(errs).length > 0) {
        return false
      } else { 
        let mobilenum = this.state.number.substr(3, this.state.number.length-1)

        this.onRegisterAndValidate(async (data, body) => {
          this.setState({ loading: false })
          this.openActivityForResult({
            trans_id: data.trans_id,
            mobile_number: "63" + mobilenum,
            birthday:Theme.formatter.DT4API(this.state.birthdate || ""),
            mobile:mobilenum
          })
        }, error => {
          Platform.OS == 'ios' ? setTimeout(() => {
            Alert.alert("Error", error.message)
          }, 300) :
          Alert.alert("Error", error.message)
          this.setState({ loading: false, errors:{ mobile: [success.message] }})
        })
      }
    }
  }

  onChangeTextValueFirstname = (text) => {
    if (/^[a-zA-Z ]+$/.test(text) || text === "") {
      this.setState({ fname: text })
    }
  }

  onChangeTextValueLastname = (text) => {
    if (/^[a-zA-Z ]+$/.test(text) || text === "") {
      this.setState({ lname: text })
    }
  }

  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} />
        <Elements.CustomDatePicker 
          visible={this.state.datepicker}
          textColor={this.props.app_theme?.theme.colors.text}
          isDarkMode={this.props.app_theme?.theme.dark}
          modalBackgroundColor={this.props.app_theme?.theme.colors.border}
          date={this.state.birthdate ? new Date(this.state.birthdate) : new Date(Date.now())} 
          onConfirm={(selectedDate) => {
            this.setState({ birthdate: selectedDate ? moment(selectedDate).format("DD MMM YYYY") : this.state.birthdate != null ? this.state.birthdate : null, datepicker: false, agree: false, valid: false })
          }}
          onCancel={() => this.setState({ datepicker: false })}
        />
        <CustomHeader title="" menu={false} back={true} onBackPress={() => this.props.navigation.goBack()} navigation={this.props.navigation} />
        <KeyboardAvoidingView 
          style={{flex: 1}}
          behavior="padding"
          keyboardVerticalOffset={Theme.platform === 'ios' ? 50 : 70}
        >
          <ScrollView>
          <View style={{flex: 1}}> 
            <View style={{flex: 1, alignItems: 'center'}}>
              <Text style={{alignSelf: 'center', fontFamily: 'Arial', fontWeight: 'bold', fontSize: 25, padding: 15, marginTop: 25, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>Enter Your Details</Text>
              <Text style={{alignSelf: 'center', textAlign: 'center', width: '90%', marginTop: 0, padding: 15, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary, fontFamily: 'Arial', fontSize: 16}}>
                Fill out the remaining forms and you're good to go!
              </Text>
              <CustomInput
                title="First Name"
                value={this.state.fname}
                index={1}
                current={this.state.activeInput}
                keyboardType={'ascii-capable'}
                textColor={this.props.app_theme?.theme.colors.text}
                isDarkMode={this.props.app_theme?.theme.dark}
                focus={this.state.focus}
                error={this.state.errors && this.state.errors.firstname ? this.state.errors.firstname : false}
                errorMessage={this.state.errors && this.state.errors.firstname ? this.state.errors.firstname[0] : ""}
                onFocus={() => {
                  this.setState({ activeInput: 1, focus: true })
                }}
                onChangeText={this.onChangeTextValueFirstname}
              />
              <CustomInput
                top={50} 
                title="Last Name"
                value={this.state.lname}
                index={2}
                current={this.state.activeInput}
                keyboardType={'ascii-capable'}
                textColor={this.props.app_theme?.theme.colors.text}
                isDarkMode={this.props.app_theme?.theme.dark}
                focus={this.state.focus}
                error={this.state.errors && this.state.errors.lastname ? this.state.errors.lastname : false}
                errorMessage={this.state.errors && this.state.errors.lastname ? this.state.errors.lastname[0] : ""}
                onFocus={() => {
                  this.setState({ activeInput: 2, focus: true })
                }}
                onChangeText={this.onChangeTextValueLastname}
              />
              <CustomInput
                top={50} 
                title="Email Address"
                value={this.state.email}
                index={3}
                current={this.state.activeInput}
                focus={this.state.focus}
                textColor={this.props.app_theme?.theme.colors.text}
                isDarkMode={this.props.app_theme?.theme.dark}
                error={this.state.errors && this.state.errors.email ? this.state.errors.email : false}
                errorMessage={this.state.errors && this.state.errors.email ? this.state.errors.email[0] : ""}
                onFocus={() => {
                  this.setState({ activeInput: 3, focus: true })
                }}
                onChangeText={(val) => {
                  this.setState({ email: val })
                }}
              />
    
              <View style={{flexDirection: 'row', width: '80%', marginTop: 35, alignItems: 'center'}}> 
                <View style={{flex: 1}}>
                  {this.state.activeInput >= 4 ? <Text style={{fontSize: 12, color: this.state.activeInput == 4 && this.state.focus ? Theme.colors.accent : Theme.colors.darkGray, marginTop: -25, marginBottom: 15}}>Birthday</Text> : null}
                  <TouchableOpacity 
                    onPress={() => {
                      this.setState({ focus: true, activeInput: 4, datepicker: true })
                      if(this.state.errors && this.state.errors.birthdate) delete this.state.errors.birthdate
                    }}>
                    <View style={{paddingTop: 15, paddingBottom: 5,borderColor: this.state.errors && this.state.errors.birthdate ? Theme.colors.primary : 'gray', borderBottomWidth: this.state.errors && this.state.errors.birthdate ? 1.5 : 1}}>
                      <Text style={{fontSize: 17, fontFamily: 'Arial', color: (this.state.birthdate && this.props.app_theme?.theme.dark) ? this.props.app_theme?.theme.colors.text : this.state.birthdate ? Theme.colors.textPrimary : Theme.colors.darkGray}}>{this.state.birthdate || "Birthday"}</Text>
                    </View>
                  </TouchableOpacity>
                  {this.state.errors && this.state.errors.birthdate ? 
                  <Text style={{fontSize: 12, color: Theme.colors.primary, marginTop: 5, marginBottom: 15, width: '90%'}}>
                    {this.state.errors?.birthdate[0]}
                  </Text> : null}
                </View>
              </View>
    
              <CustomInput
                top={50} 
                index={5}
                current={this.state.activeInput}
                focus={this.state.focus}
                title="Mobile Number"
                value={this.state.number && this.state.number.length <= 2 ? '+63' : this.state.number}
                keyboardType="numeric"
                maxlength={13}
                textColor={this.props.app_theme?.theme.colors.text}
                isDarkMode={this.props.app_theme?.theme.dark}
                error={this.state.errors && this.state.errors.mobile ? this.state.errors.mobile : false}
                errorMessage={this.state.errors && this.state.errors.mobile ? this.state.errors.mobile[0] : ""}
                onFocus={() => {
                  this.setState({ activeInput: 5, focus: true })
                  if(this.state.number == null) this.setState({ number: '+63' })
                }}
                onChangeText={(val) => {
                  this.setState({ number: val, errors: null })
                  if(this.state.agree){
                    if(val.length < 13) this.setState({ valid: false })
                    else if(val.length == 13) this.setState({ valid: true })
                  }
                }}
              />  
              <View style={{flexDirection: 'row', width: '80%', marginTop: 15, alignItems: 'center'}}> 
                <TouchableOpacity onPress={() => this.state.fname && this.state.lname && this.state.birthdate && this.state.email && this.state.number ? this.onAgree() : null} style={{flex: 0, paddingTop: 15}}>
                  {!this.state.agree ? <Icon.Feather color={this.props.app_theme?.theme.colors.text} name="square" size={20} /> : <Icon.AntDesign name="checksquare" color={Theme.colors.accent} size={20} />}
                </TouchableOpacity>
                <View style={{flex: 1, paddingTop: 10, paddingHorizontal: 10}}>
                  <View style={{flexDirection: 'row', paddingTop: 5, alignItems: 'center'}}>
                    <Text style={{ color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>I agree to </Text>
                    <TouchableOpacity style={{ paddingVertical: 10 }} onPress={() => this.props.navigation.navigate("TermsConditions", {screen: 'ApplyForm'})}>
                      <Text style={{color: Theme.colors.primary}}>Unioil's Data Privacy Policy.</Text>
                    </TouchableOpacity>
                  </View>
                </View>
              </View>
              <View style={{alignItems: 'center', justifyContent: 'flex-end', padding: 20, marginTop: 20}}>
                <TouchableOpacity onPress={() => this.onSubmit()} disabled={!this.state.valid} style={{padding: 20, paddingTop: 15, width: Theme.screen.w - 60, 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'}}>Submit</Text>
                </TouchableOpacity>
              </View>
            </View>        
          </View>
          </ScrollView>
        </KeyboardAvoidingView>
      </CustomSafeArea>
    );
  }
}

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

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