import React, { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { register } from "../../redux/actions/auth";

const RegisterPage = (props) => {
  const [username, setUsername] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [errMsg, setErrMsg] = useState({
    username: "",
    email: "",
    password: "",
  });
  const [successful, setSuccessful] = useState(false);
  const { message } = useSelector((state) => state.message);

  const dispatch = useDispatch();

  const handleChangeUser = (event) => {
    if (validate(/^[A-Z0-9-.]{1,20}$/, event.target.value)) {
      setUsername(event.target.value);
      setErrMsg({ ...errMsg, username: "" });
    } else {
      setErrMsg({ ...errMsg, username: "invalid Username." });
    }
  };

  const handleChangeEmail = (event) => {
    if (
      validate(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/, event.target.value)
    ) {
      setEmail(event.target.value);
      setErrMsg({ ...errMsg, email: "" });
    } else {
      setErrMsg({ ...errMsg, email: "invalid Email Address." });
    }
  };

  const handleChangePass = (event) => {
    if (event.target.value.length < 8 || event.target.value.length > 40) {
      setErrMsg({
        ...errMsg,
        password: "Password must be between 8 and 40 charactes.",
      });
    } else {
      setPassword(event.target.value);
      setErrMsg({ ...errMsg, password: "" });
    }
  };

  const validate = (regex, value) => {
    return new RegExp(regex, "i").test(value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    dispatch(register(username, email, password))
      .then(() => {
        setSuccessful(true);
      })
      .catch(() => {
        setSuccessful(false);
      });
  };

  return (
    <div className="landing-content">
      <form className="generic-column-20px" onSubmit={handleSubmit}>
        {!successful && (
          <div className="generic-column-20px">
            <div>
              <input
                type="text"
                className="contact-form-field"
                placeholder="Username"
                onChange={handleChangeUser}
              />
              {errMsg.username && <p className="error">{errMsg.username}</p>}
            </div>
            <div>
              <input
                type="text"
                className="contact-form-field"
                placeholder="Email"
                onChange={handleChangeEmail}
              />
              {errMsg.email && <p className="error">{errMsg.email}</p>}
            </div>
            <div>
              <input
                type="password"
                className="contact-form-field"
                placeholder="Password"
                onChange={handleChangePass}
              />
              {errMsg.password && <p className="error">{errMsg.password}</p>}
            </div>
            <div style={{ display: "flex", justifyContent: "center" }}>
              <input
                type="submit"
                value="Register"
                className="action-button"
                style={{ padding: "15px 50px" }}
              />
            </div>
          </div>
        )}
        {message && (
          <div className="form-group">
            <div
              className={
                successful ? "alert alert-success" : "alert alert-danger"
              }
              role="alert"
            >
              {message}
            </div>
          </div>
        )}
      </form>
    </div>
  );
};

export default RegisterPage;