import React, { Component } from "react";
import { withRouter, Link } from "react-router-dom";
import { connect } from "react-redux";
import { login } from "../redux/actions/actions";
class LogIn extends Component {
  state = {
    errors: false,
    auth: { email: "", password: "" }
  };

  handleChange = e => {
    this.setState({
      auth: { ...this.state.auth, [e.target.name]: e.target.value }
    });
  };
  handleSubmit = (e, obj) => {
    e.preventDefault();
    this.props.login(obj);
    console.log(this.props.currentUser, "730");
  };

  render() {
    return (
      <div className="login-parent">
        <div className="login-container" />
        <div className="login-div">
          <div className="loginformtitle">
            <h1 className="login-title">Login</h1>
            <form
              onSubmit={e => this.handleSubmit(e, this.state)}
              className="login-form"
            >
              <label htmlFor="email" />
              <br />
              <input
                placeholder="E-mail"
                onChange={this.handleChange}
                name="email"
                className="email"
                type="email"
                value={this.state.auth.email}
              />
              <br />
              <br />
              <label htmlFor="password" />
              <br />
              <input
                placeholder="Password"
                onChange={this.handleChange}
                name="password"
                className="password"
                type="password"
                value={this.state.auth.password}
              />
              <br />
              <input type="submit" name="Submit" value="Sign In" id="sign-in" />
              <Link
                to={{
                  pathname: `/signup`
                }}
              >
                <button className="signup-button">Sign Up</button>
              </Link>
            </form>
            <br />
          </div>
        </div>
      </div>
    );
  }
}
const mapStateToProps = (state, ownProps) => {
  if (state) {
    console.log(state.currentUser, "state", ownProps);
    return {
      currentUser: state.currentUser
    };
  }
};

const mapDispatchToProps = dispatch => {
  return {
    login: obj => dispatch(login(obj))
  };
};

export default withRouter(
  connect(
    mapStateToProps,
    mapDispatchToProps
  )(LogIn)
);