import * as React from "react";
import { useAuthState } from "../../helpers/authHelper";
import { Redirect } from "react-router";

const SignIn = () => {
  const [username, setUsername] = React.useState("");
  const [password, setPassword] = React.useState("");
  const [isSignedIn, setAuth] = useAuthState();
  if (isSignedIn) {
    return <Redirect to="/home" />;
  }

  const changeUsername: React.ChangeEventHandler<HTMLInputElement> = e => {
    setUsername(e.currentTarget.value);
  };
  const changePassword: React.ChangeEventHandler<HTMLInputElement> = e => {
    setPassword(e.currentTarget.value);
  };

  const handleSubmit = () => {
    setAuth({
      id: username,
      password,
    });
  };

  return (
    <div>
      <div>
        <input
          placeholder="Username"
          type="text"
          value={username}
          onChange={changeUsername}
        />
      </div>
      <div>
        <input
          placeholder="Password"
          type="password"
          value={password}
          onChange={changePassword}
        />
      </div>

      <input type="button" onClick={handleSubmit} value="Sign In" />
    </div>
  );
};
export default SignIn;