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

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

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

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

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

  const handleSubmit = e => {
    e.preventDefault();
    props.userSignUp({
      username: username,
      password: password,
      password_confirm: passwordConfirm
    });
  };

  return (
    <div className="Row">
      <div className="col-10 offset-1 col-md-6 offset-md-3">
        <h2>Sign up</h2>
        <hr />
        {props.error && props.error !== "" && (
          <div className="alert alert-danger">{props.error}</div>
        )}

        <form className="form-horizontal" onSubmit={e => handleSubmit(e)}>
          <div className="form-group">
            <label className="control-label">Username</label>
            <input
              autoFocus="autofocus"
              className="form-control"
              value={username}
              onChange={e => setUsername(e.target.value)}
            />
          </div>

          <div className="form-group">
            <label className="control-label">Password</label>
            <input
              className="form-control"
              type="password"
              value={password}
              onChange={e => setPassword(e.target.value)}
            />
          </div>

          <div className="form-group">
            <label className="control-label">Password confirm</label>
            <input
              className="form-control"
              type="password"
              value={passwordConfirm}
              onChange={e => setPasswordConfirm(e.target.value)}
            />
          </div>
          <div>
            {props.isLoading && (
              <button className="btn btn-primary pull-right">
                <i className="fa fa-spinner fa-spin"></i>
              </button>
            )}
            {props.isLoading || (
              <span>
                <input
                  className="btn btn-primary pull-right"
                  type="submit"
                  value="Sign up"
                />
              </span>
            )}
          </div>
        </form>
      </div>
    </div>
  );
};
UserSignUp.propTypes = {
  isLogged: PropTypes.bool.isRequired,
  isLoading: PropTypes.bool.isRequired,
  userSignUp: PropTypes.func.isRequired,
  error: PropTypes.string
};

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