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

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

const UserLoginForm = () => {
  const dispatch = useDispatch();

  const isLogged = useSelector((state) => state.userStore.get("isLogged"));
  const isLoading = useSelector((state) => state.userStore.get("loading"));
  const error = useSelector((state) => state.userStore.get("error"));

  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");

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

  if (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 />
        {error && error !== "" && (
          <div className="alert alert-danger">{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>
            {isLoading && (
              <button className="btn btn-primary pull-right">
                <i className="fa fa-spinner fa-spin"></i>
              </button>
            )}
            {isLoading || (
              <span className="spaced-icons">
                <input
                  className="btn btn-primary pull-right"
                  type="submit"
                  value="Log in"
                />
              </span>
            )}
            <br />
          </div>
        </form>
      </div>
    </div>
  );
};

export default UserLoginForm;