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="container">
      <div className="content-fluid">
        <div className="col-md-6 col-md-offset-3 col-xs-12">
          <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>
    </div>
  );
}
UserLoginForm.propTypes = {
  loginUser: PropTypes.func.isRequired,
  isLoading: PropTypes.bool.isRequired,
  isLogged: PropTypes.bool.isRequired,
  error: PropTypes.string,
};

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