import React, { Component } from "react";
import { Text, View, TouchableOpacity, Dimensions, ImageBackground, Image, Alert } from "react-native";
import { Icon, Content, Button } from "native-base";
import { TextField } from 'react-native-material-textfield';
import IconVector from 'react-native-vector-icons/FontAwesome';

import * as Http from '../../Helpers/Http';
import lang from '../../Helpers/Language';
const height = Dimensions.get("window").height;
const width = Dimensions.get("window").width;

export default class Register extends Component {
  static navigationOptions = {
    title: '',
    header: null
  };

  constructor(props) {
    super(props);
    this.state = {
      email: '',
      phone:'',
      password: '',
      repassword:'',
      secureTextEntry: true,
      loginMode: 'email',
      countryCode:'+62'
    }
    this._passwordAccessory = this._passwordAccessory.bind(this);
  }

  registerValidation(){
    // if(this.state.UserName == ''){
    //   return Alert.alert("Please Fill the User Name Field.");
    // }else if(this.state.UserName.length < 8){
    //   return Alert.alert("User Name Field Must Contain at Least 8 Character.")
    // }

    // if(this.state.UserFullName == ''){
    //   return Alert.alert("Please Fill the Full Name Field.");
    // }else if(this.state.UserFullName.length < 8){
    //   return Alert.alert("Full Name Field Must Contain at Least 8 Character.")
    // }

    let reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/ ;
    if(this.state.email == ''){
      Alert.alert('Please Fill the Email Field');
      return false;
    }else if(reg.test(this.state.email) === false)
    {
      Alert.alert("Email Format not Correct");
      return false;
    }

    if(this.state.password != this.state.repassword){
      Alert.alert('Password not Match');
      return false;
    }else if(this.state.password.length < 8 ){
      Alert.alert('Password Field Must Contain at Least 8 Character');
      return false;
    }

    if(this.state.phone == ''){
      Alert.alert('Please Fill the Phone Number Field');
      return false;
    }

    return true;
  }

  registerUser() {

    let status_validation = this.registerValidation();

    // Example to use Http Helper
    let reqParams = {
      link: 'register',
      method: 'POST',
      show_error_alert: true,
      body: {
        "name":this.state.email,
        "email":this.state.email,
        "displayName":this.state.email,
        "phone":this.state.phone,
        "password":this.state.password,
        "login_type":"none",
        "countryCode":this.state.countryCode,
        "role":1
      }
    }

    if(status_validation == true){
      Http.createRequest(reqParams).then((resp) => {
        this._resetForm();
        if(resp.message == '1007'){
          Alert.alert(lang('api_response_success.1007'));
          return;
        }

        if(resp.message == '1008'){
          Alert.alert(
            'Notification',
            lang('api_response_success.1008'),
            [
              {text: 'Ok', onPress: () => this.props.navigation.navigate('homeScreen')},
            ],
            { cancelable: false }
          )

        }

      }).catch((err) => console.log("Respon API Error", err.message));
    }
  }

  _passwordAccessory() {
    return(
      <IconVector
        name={ this.state.secureTextEntry ? 'eye' : 'eye-slash'}
        size={20}
        color='red'
        onPress={() => {
          this.setState((previousState) => ({ secureTextEntry: !previousState.secureTextEntry }))
        }}
      />
    );
  }

  _resetForm() {
    this.setState({
      email: '',
      phone:'',
      password: '',
      repassword:'',
      secureTextEntry: true,
      loginMode: 'email',
      countryCode:'+62'
    });
  }

  render() {
    return (
      <View style={{ flex: 1 }}>
        <ImageBackground source={require('../../Assets/authBackG.jpg')} style={{ width: width, height: height }} >
          <View style={{ flexDirection: 'row', justifyContent: 'space-between', margin: 10 }} >
            <TouchableOpacity onPress={() => this.props.navigation.goBack()} style={{ justifyContent: 'center', alignItems: 'center', height: 50, width: 50, backgroundColor:'transparent' }}>
              <Icon name='md-arrow-back' style={{ color: 'white', fontSize: 25 }} />
            </TouchableOpacity>
            <Text style={{ color: 'white', fontSize: 16, marginTop: 20, backgroundColor:'transparent', fontFamily: 'Nunito-Bold' }} >SIGN UP</Text>
            <View style={{ width: 50 }} />
          </View>
          <Content style={{ paddingHorizontal: 40 }} >
            <TextField
              label='EMAIL'
              baseColor='white'
              tintColor='red'
              textColor='white'
              value={this.state.email}
              onChangeText={(email) => this.setState({ email })}
            />
            <View style={{flexDirection:'row', flex:1}}>

              <TextField
                containerStyle={{flex:0.15}}
                // style={{flex:0.8}}
                // label='NO. HP'
                baseColor='white'
                tintColor='red'
                textColor='white'
                keyboardType = 'numeric'
                value={this.state.countryCode}
                onChangeText={(countryCode) => this.setState({ countryCode })}
              />
              <View style={{flex:0.05}}>
              </View>
              <TextField
                containerStyle={{flex:0.8}}
                // style={{flex:0.8}}
                label='NO. HP'
                baseColor='white'
                tintColor='red'
                textColor='white'
                keyboardType = 'numeric'
                value={this.state.phone}
                onChangeText={(phone) => this.setState({ phone })}
              />
            </View>
            {/* <View style={{ flexDirection: 'row' }} > */}
            <TextField
              label='PASSWORD'
              // inputContainerStyle={{ width: width * 3 / 4 - 20 }}
              baseColor='white'
              secureTextEntry={this.state.secureTextEntry}
              tintColor='red'
              textColor='white'
              value={this.state.password}
              onChangeText={(password) => this.setState({ password })}
              renderAccessory={this._passwordAccessory}
            />
            {/* <TouchableOpacity onPress={() => this.toogleSecureTextEntry()} style={{ padding: 10, alignSelf: 'center' }} >
                  <Icon name={this.state.secureTextEntry ? 'ios-eye-outline' : 'ios-eye-off-outline'} style={{ color: 'white' }} />
                </TouchableOpacity> */}
            {/* </View> */}
            {/* <View style={{ flexDirection: 'row' }} > */}
            <TextField
              label='ULANG PASSWORD'
              // inputContainerStyle={{ width: width * 3 / 4 - 20 }}
              baseColor='white'
              secureTextEntry={this.state.secureTextEntry}
              tintColor='red'
              textColor='white'
              value={this.state.repassword}
              onChangeText={(repassword) => this.setState({ repassword })}
            />
            {/* <TouchableOpacity onPress={() => this.toogleSecureTextEntry()} style={{ padding: 10, alignSelf: 'center' }} >
                  <Icon name={this.state.secureTextEntry ? 'ios-eye-outline' : 'ios-eye-off-outline'} style={{ color: 'white' }} />
                </TouchableOpacity> */}
            {/* </View> */}

            <Button
              onPress={()=>this.registerUser()}
              block style={{ backgroundColor: 'red', marginTop: 30 }} >
              <Text style={{ color: 'white', fontFamily: 'Nunito-Bold' }} >REGISTER</Text>
            </Button>

            <Text on style={{ color: 'white', borderBottomColor: 'white', borderBottomWidth: 1, alignSelf: 'center', marginTop: 25, fontFamily: 'Nunito-Bold' }}> OR SIGN UP WITH </Text>

            {
              //login with fb or g+
            }
            <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginTop: 20 }} >
              <TouchableOpacity
                onPress={()=>{}}
                style={styles.buttonStyleSoc}
              >
                <Text style={styles.buttonTextStyleSoc}>
                  <IconVector name="facebook" size={14} color="#3b5998" />
                  &nbsp;&nbsp;Facebook
                </Text>
              </TouchableOpacity>

              <TouchableOpacity
                onPress={()=>{}}
                style={styles.buttonStyleSoc}
              >
                <Text style={styles.buttonTextStyleSoc}>
                <IconVector name="google-plus" size={14} color="#d34836" />
                &nbsp;&nbsp;Google
                </Text>
              </TouchableOpacity>
            </View>

            <Text on style={{ color: 'white', borderBottomColor: 'white', borderBottomWidth: 1, alignSelf: 'center', marginTop: 25, fontFamily: 'Nunito-Bold' }} onPress={() => this.props.navigation.goBack()} > Already have an account ? Login here </Text>

          </Content>
        </ImageBackground>
      </View>
    );
  }
}

const styles = {

  buttonTextStyleSoc: {
    color: 'black',
    alignSelf: 'center',
    paddingVertical: 15,
    fontSize: 14,
    fontFamily: 'Nunito-Bold'

  },
  buttonStyleSoc: {
    width: '48%',
    backgroundColor: '#ffffff',
    alignItems: 'center',
    height: 50,
    borderRadius: 5,
    marginTop: 7
  },
}