import React, { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Navigate, useNavigate } from "react-router-dom";
import { login } from "../../redux/actions/auth";

const LoginPage = (props) => {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const { isLoggedIn } = useSelector((state) => state.auth);
  const { message } = useSelector((state) => state.message);

  const navigate = useNavigate();
  const dispatch = useDispatch();

  const handleChangeUser = (event) => {
    setUsername(event.target.value);
  };

  const handleChangePass = (event) => {
    setPassword(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    dispatch(login(username, password)).then(() => {
      navigate("/profile");
      window.location.reload();
    });
  };

  if (isLoggedIn) {
    return <Navigate to="/profile" />;
  }

  return (
    <div className="landing-content">
      <form className="generic-column-20px" onSubmit={handleSubmit}>
        <input
          type="text"
          className="contact-form-field"
          placeholder="Username"
          onChange={handleChangeUser}
        />
        <input
          type="password"
          className="contact-form-field"
          placeholder="Password"
          onChange={handleChangePass}
        />
        <input
          type="submit"
          value="Login"
          className="action-button"
          style={{ padding: "15px 50px" }}
        />
        <p className="error">{message}</p>
      </form>
    </div>
  );
};

export default LoginPage;