import React from "react";
import { View, Text, StyleSheet, Button, Alert } from "react-native";
import { Color } from "../values";
import { Container, EditText } from "../components";
import { signInUser } from "../services/UserManager";
import * as Validators from "../utils/Validators";
import { NavigationActions } from "react-navigation";

class LoginComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      userName: "",
      password: "",
      usernameError: "",
      passwordError: "",
      disableLoginButton: true
    };

    this._onLoginClicked = this._onLoginClicked.bind(this);
  }

  _onLoginClicked() {
    console.log("Login Clicked");
    signInUser(this.state.userName, this.state.password)
      .then(user => {
        this.props.onLoginSuccess(user)
      })
      .catch(error => this.onLoginError(error));
  }

  onLoginError(error) {
    Alert.alert("Login Failed", error.message);
  }

  checkForLoginButton() {
    let areInputsValid =
      Validators.isEmailValid(this.state.userName) &&
      this.state.password.length > 6;
    console.log(areInputsValid);
    this.setState({
      disableLoginButton: !areInputsValid
    });
  }

  render() {
    console.log("render occured");
    return (
      <View style={styles.rootContainer}>
        <View style={styles.loginFormContainer}>
          <Container showEmpty={true}>
            <EditText
              hint="Username"
              onChangeText={changedUsername => {
                this.setState(
                  { userName: changedUsername },
                  this.checkForLoginButton
                );
              }}
            />
          </Container>
          <Container showEmpty={true}>
            <EditText
              hint="Password"
              onChangeText={password => {
                this.setState({ password: password }, this.checkForLoginButton);
              }}
              secureText={true}
              errorHandler={this.state.passwordError}
            />
          </Container>
          <View style={{ padding: 4 }}>
            <Button
              color={Color.colorPrimary}
              title="Login"
              onPress={this._onLoginClicked}
              disabled={this.state.disableLoginButton}
            />
          </View>
        </View>
        <Text style={styles.orStyle}>- OR -</Text>
        <Text style={styles.creatAccountStyle} onPress={this.props.onCreateAccountClicked}>
          Create Account
        </Text>
      </View>
    );
  }
}

export default LoginComponent;

const styles = StyleSheet.create({
  loginFormContainer: {
    marginLeft: 16,
    marginRight: 16,
    marginTop: 24
  },
  orStyle: {
    color: Color.colorPrimary,
    alignSelf: "center",
    fontSize: 12
  },
  creatAccountStyle: {
    color: Color.colorPrimary,
    alignSelf: "center",
    fontSize: 16,
    textDecorationLine: "underline",
    margin: 16
  }
});