import React, { useCallback, useState } from "react";
import { useNavigate, useLocation } from "react-router-dom";
import { useAppDispatch } from "../app/hooks";
import { register } from "../features/auth/auth-slice";

const Register: React.FC = () => {
  const dispatch = useAppDispatch();
  const navigate = useNavigate();

  const [username, setUsername] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [passwordcheck, setPasswordcheck] = useState("");
  const handleRegister = () => {
    if (password !== passwordcheck) {
      alert("password doesn't match");
      return;
    }

    dispatch(register({ email, username, password }));
  };
  return (
    <div>
      <label htmlFor="username">Username</label>
      <input
        type="text"
        name="username"
        id="username"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <label htmlFor="email">Email</label>
      <input
        type="email"
        name="email"
        id="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <label htmlFor="password">Password</label>
      <input
        type="password"
        name="password"
        id="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <label htmlFor="passwordcheck">Reenter Password</label>
      <input
        type="password"
        name="passwordcheck"
        id="passwordcheck"
        value={passwordcheck}
        onChange={(e) => setPasswordcheck(e.target.value)}
      />
      <input type="submit" value="Login" onClick={handleRegister} />
    </div>
  );
};

export default Register;
