import { NextPage } from "next";
import { useEffect } from "react";
import Layout from "../components/Layout";
import { useAuth } from "../context/UserContext";
import useForm from "../hooks/useForm";
import { useRouter } from "next/router";
import Spinner from "../components/Spinner";
import api from "../utils/api";

const Login: NextPage = () => {
  const { login } = useAuth();
  const router = useRouter();

  const { error, submitHandler, success, loading } = useForm(api.login);

  useEffect(() => {
    if (success) {
      login(success.result);
      router.push("/");
    }
  }, [success, login, router]);

  return (
    <Layout>
      <form className="form" onSubmit={submitHandler} autoComplete="true">
        <div className="form-group">
          <label htmlFor="email" className="form-label">
            Email
          </label>
          <input
            type="email"
            name="email"
            id="email"
            className="form-input"
            placeholder="monkey@gmail.com"
            required
          />
        </div>
        <div className="form-group">
          <label htmlFor="password" className="form-label">
            Password
          </label>
          <input
            type="password"
            name="password"
            id="password"
            minLength={6}
            className="form-input"
            placeholder="••••••"
            required
          />
        </div>
        <button
          type="submit"
          className="default-button col-start-2 w-max"
          disabled={loading}
        >
          {loading ? <Spinner /> : "Log in"}
        </button>
        {error && !success && (
          <div role="alert" className="form-alert-msg">
            {error.message}
          </div>
        )}
      </form>
    </Layout>
  );
};

export default Login;