import { gql, useQuery } from '@apollo/client';
import { Heading, Input, Stack } from '@chakra-ui/react';
import { Button } from '@client/components/ui/button';
import { Field } from '@client/components/ui/field';
import { createFileRoute } from '@tanstack/react-router';
import { useForm } from 'react-hook-form';
import { valibotResolver } from '@hookform/resolvers/valibot';
import * as v from 'valibot';

export const Route = createFileRoute('/login')({
  component: LoginComponent
});

function LoginComponent() {
  // const { data } = useQuery(getBooksQuery);

  return (
    <Stack flexDirection={'column'} justifyContent={'center'} alignItems={'center'}>
      <Heading>Login</Heading>
      <Login />
    </Stack>
  );
}

interface FormValues {
  email: string;
  password: string;
}

function Login() {
  const schema = v.pipe(
    v.object({
      email: v.pipe(v.string(), v.nonEmpty('Email is required'), v.email('Invalid email')),
      password: v.pipe(v.string(), v.nonEmpty('Password is required'))
    })
  );

  const {
    register,
    handleSubmit,
    formState: { errors }
  } = useForm<FormValues>({ resolver: valibotResolver(schema) });

  return (
    <form onSubmit={handleSubmit(data => alert(data))}>
      <Stack>
        <Field label="Email" invalid={errors.email != null} errorText={errors.email?.message}>
          <Input {...register('email')} />
        </Field>
        <Field
          label="Password"
          invalid={errors.password != null}
          errorText={errors.password?.message}
        >
          <Input {...register('password')} />
        </Field>
        <Button type="submit">Sign in</Button>
      </Stack>
    </form>
  );
}

/* const getBooksQuery = gql`
  query BooksMany {
    booksMany {
      id
      author
      title
    }
  }
`; */