import React, { Component } from "react";
import {
  Text,
  View,
  KeyboardAvoidingView,
  Alert,
  ScrollView
} from "react-native";
import { connect } from "react-redux";
import {
  registerUser,
  registerFailedReset
} from "../../register/register.actions";
import styles from "../register.style";
import validation from "../../validation/validation";
import TextField from "../../common/TextInputs/components/textField";
import BigButton from "../../common/buttons/bigButton";
import PageHeader from "../../common/texts/pageHeader";

class Register extends Component {
  constructor(props) {
    super(props);
    this.state = {
      firstname: "",
      lastname: "",
      isEmailValid: true,
      isPasswordValid: true,
      isFirstnameValid: true,
      isLastnameValid: true,
      isHcpValid: true
    };
  }

  handleRegister = () => {
    const user = {
      firstname: this.state.firstname,
      lastname: this.state.lastname
    };
    this.props.RegisterUser(
      this.state.username,
      this.state.password,
      user,
      this.props.navigation
    );
  };
  handleRegisterFailed = () => {
    this.props.RegisterFailedReset();
  };

  registerAlert = viewId => {
    Alert.alert("", viewId);
  };

  handleEmailValidation = () => {
    const regexEmail = validation.regexEmail;
    if (regexEmail.test(this.state.username)) {
      this.setState({
        isEmailValid: true
      });
    } else {
      this.setState({
        isEmailValid: false
      });
    }
  };

  handlePasswordValidation = () => {
    const regexPassword = validation.regexPassword;
    if (regexPassword.test(this.state.password)) {
      this.setState({
        isPasswordValid: true
      });
    } else {
      this.setState({
        isPasswordValid: false
      });
    }
  };

  handleFirstnameValidation = () => {
    const regexFirstname = validation.regexOnlyLetters;
    if (regexFirstname.test(this.state.firstname)) {
      this.setState({
        isFirstnameValid: true
      });
    } else {
      this.setState({
        isFirstnameValid: false
      });
    }
  };

  handleLastnameValidation = () => {
    const regexLastname = validation.regexOnlyLetters;
    if (regexLastname.test(this.state.lastname)) {
      this.setState({
        isLastnameValid: true
      });
    } else {
      this.setState({
        isLastnameValid: false
      });
    }
  };

  render() {
    const toggleInputFieldEmail = !this.state.isEmailValid
      ? styles.error
      : styles.inputContainer;

    const toggleInputFieldPassword = !this.state.isPasswordValid
      ? styles.error
      : styles.inputContainer;

    const toggleInputFieldFirstname = !this.state.isFirstnameValid
      ? styles.error
      : styles.inputContainer;

    const toggleInputFieldLastname = !this.state.isLastnameValid
      ? styles.error
      : styles.inputContainer;

    return (
      <KeyboardAvoidingView style={styles.container} behavior="padding">
        <ScrollView>
          <PageHeader style={styles.headerText}>REGISTER</PageHeader>
          <View style={styles.firstContainer}>
            <View style={toggleInputFieldEmail}>
              <TextField
                autoCorrect={false}
                placeholder="Email"
                placeholderTextColor="white"
                keyboardType="email-address"
                underlineColorAndroid="transparent"
                onChangeText={username => this.setState({ username })}
                onBlur={this.handleEmailValidation}
                onFocus={() => this.setState({ isEmailValid: true })}
              />
            </View>
            <View style={toggleInputFieldFirstname}>
              <TextField
                autoCorrect={false}
                placeholder="Firstname"
                placeholderTextColor="white"
                underlineColorAndroid="transparent"
                onChangeText={firstname => this.setState({ firstname })}
                onBlur={this.handleFirstnameValidation}
                onFocus={() => this.setState({ isFirstnameValid: true })}
              />
            </View>
            <View style={toggleInputFieldLastname}>
              <TextField
                autoCorrect={false}
                placeholder="Lastname"
                placeholderTextColor="white"
                underlineColorAndroid="transparent"
                onChangeText={lastname => this.setState({ lastname })}
                onBlur={this.handleLastnameValidation}
                onFocus={() => this.setState({ isLastnameValid: true })}
              />
            </View>

            <View style={toggleInputFieldPassword}>
              <TextField
                autoCorrect={false}
                placeholder="Password"
                placeholderTextColor="white"
                secureTextEntry
                underlineColorAndroid="transparent"
                onChangeText={password => this.setState({ password })}
                onBlur={this.handlePasswordValidation}
                onFocus={() => this.setState({ isPasswordValid: true })}
              />
            </View>

            <BigButton onPress={this.handleRegister} text="Register" />
          </View>
        </ScrollView>
      </KeyboardAvoidingView>
    );
  }
}

const mapStateToProps = state => ({
  username: state.register.username,
  password: state.register.password,
  user: state.register.user,
  register: state.register.register,
  registerSuccessful: state.register.registerSuccessful,
  registerFailed: state.register.registerFailed,
  registerFailedEmailIsTaken: state.register.registerFailedEmailIsTaken
});

const mapDispatchToProps = dispatch => ({
  RegisterUser: (username, password, user, navigation) =>
    dispatch(
      registerUser(
        username,
        password,
        user.firstname,
        user.lastname,
        navigation
      )
    ),
  RegisterFailedReset: () => dispatch(registerFailedReset())
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Register);