import React, { Component } from "react";
import { connect } from "react-redux";
import classnames from "classnames";
import PropTypes from "prop-types";
import { loginUser } from "../../store/actions/authActions";

class Login extends Component {
  state = {
    password: "",
    email: "",
    errors: {}
  };

componentDidMount(){
  if(this.props.auth.isAuth){
    this.props.history.push('/dashboard')
  }
}


static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.auth.isAuth) {
      nextProps.history.push("/dashboard");
    }

      if (nextProps.errors) {
        return {
          errors: nextProps.errors
        };
      }
    return null

  }

// UNSAFE_componentWillReceiveProps(nextProps){
//   if (nextProps.auth.isAuth) {
//           nextProps.history.push("/dashboard");
//         }
//   if (nextProps.errors) {

//        this.setState({errors: nextProps.errors})

//   }
// }




  onInputChange = e => {
    this.setState({ [e.target.name]: e.target.value });
  };

  onSubmitHandler = e => {
    e.preventDefault();
    const user = {
      email: this.state.email,
      password: this.state.password
    };

    this.props.loginUser(user, this.props.history);
  };

  render() {
    const { errors } = this.state;
    return (
      <div className="login">
        <div className="container">
          <div className="row">
            <div className="col-md-8 m-auto">
              <h1 className="display-4 text-center">Log In</h1>
              <p className="lead text-center">
                Sign in to your DevConnector account
              </p>
              <form onSubmit={this.onSubmitHandler}>
                <div className="form-group">
                  <input
                    type="email"
                    className={classnames("form-control form-control-lg", {
                      "is-invalid": errors.email
                    })}
                    placeholder="E-Mail Address"
                    name="email"
                    value={this.state.email}
                    onChange={this.onInputChange}
                  />
                  {errors.email && (
                    <div className="invalid-feedback">{errors.email}</div>
                  )}
                </div>
                <div className="form-group">
                  <input
                    type="password"
                    className={classnames("form-control form-control-lg", {
                      "is-invalid": errors.password
                    })}
                    placeholder="Password"
                    name="password"
                    value={this.state.password}
                    onChange={this.onInputChange}
                  />
                  {errors.password && (
                    <div className="invalid-feedback">{errors.password}</div>
                  )}
                </div>
                <input type="submit" className="btn btn-info btn-block mt-4" />
              </form>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

Login.propTypes = {
  auth: PropTypes.object.isRequired,
  loginUser: PropTypes.func.isRequired,
  errors: PropTypes.object.isRequired
};

const mapStateToProps = state => {
  return {
    auth: state.auth,
    errors: state.errors
  };
};

export default connect(
  mapStateToProps,
  { loginUser }
)(Login);