import type { NextPage } from "next";
import type { FormEvent } from "react";
import { gql } from "@apollo/client";

import { client } from "../lib/client";

const Login: NextPage = () => {
  async function loginUser(event: FormEvent): Promise<void> {
    event.preventDefault();

    const input = {
      email: (event.target as HTMLFormElement).email.value,
      password: (event.target as HTMLFormElement).password.value,
    };
    console.log(input);

    // client
    //   .mutate({
    //     mutation: gql`
    //       mutation Login($input: LoginInput!) {
    //         login(input: $input) {
    //           user {
    //             id
    //             firstname
    //             lastname
    //             email
    //           }
    //           bearer
    //         }
    //       }
    //     `,
    //   })
    //   .then((res) => {
    //     console.log(res);
    //   });
  }

  return (
    <div>
      <h1>Login:</h1>
      <form onSubmit={loginUser}>
        <label htmlFor="email">Email:</label>
        <br />
        <input type="email" id="email" autoComplete="email" required />
        <br />
        <label htmlFor="password">Password:</label>
        <br />
        <input
          type="password"
          id="password"
          autoComplete="current-password"
          required
        />
        <br />
        <button type="submit">Login</button>
      </form>
    </div>
  );
};

export default Login;