import React, { useState } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { Redirect, Link } from "react-router-dom";

import { loginUser } from "../../actions/users";

const mapStateToProps = state => ({
  isLogged: state.userStore.get("isLogged"),
  isLoading: state.userStore.get("loading"),
  error: state.userStore.get("error")
});
const mapDispatchToProps = { loginUser };

const UserLoginForm = props => {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");

  const handleSubmit = e => {
    e.preventDefault();
    if (!props.isLoading) {
      props.loginUser(username, password);
    }
  };

  if (props.isLogged) {
    return <Redirect to="/" />;
  }

  return (
    <div className="row">
      <div className="col-10 offset-1 col-md-6 offset-md-3">
        <h2>Log in</h2>
        <hr />
        {props.error && props.error !== "" && (
          <div className="alert alert-danger">{props.error}</div>
        )}
        <form className="form-horizontal" onSubmit={e => handleSubmit(e)}>
          <div>
            <label>Username</label>
            <br />
            <input
              className="form-control"
              type="username"
              autoFocus
              value={username}
              onChange={e => setUsername(e.target.value)}
            />
            <p></p>
          </div>
          <div>
            <label>Password</label>
            <br />
            <input
              className="form-control"
              type="password"
              autoComplete="new-password"
              value={password}
              onChange={e => setPassword(e.target.value)}
            />
            <p></p>
          </div>
          <div>
            <span className="text-muted">
              <small>
                No account yet ? <Link to="/users/signup">Create one</Link>
              </small>
            </span>
            {props.isLoading && (
              <button className="btn btn-primary pull-right">
                <i className="fa fa-spinner fa-spin"></i>
              </button>
            )}
            {props.isLoading || (
              <span className="spaced-icons">
                <input
                  className="btn btn-primary pull-right"
                  type="submit"
                  value="Log in"
                />
              </span>
            )}
            <br />
          </div>
        </form>
      </div>
    </div>
  );
};
UserLoginForm.propTypes = {
  loginUser: PropTypes.func.isRequired,
  isLoading: PropTypes.bool.isRequired,
  isLogged: PropTypes.bool.isRequired,
  error: PropTypes.string
};

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