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

export const Route = createFileRoute('/new/book')({
  component: RouteComponent,
  beforeLoad: ({ context }) => {
    if (!context.isAuthenticated) throw redirect({ to: '/' });
  }
});

function RouteComponent() {
  return (
    <Stack flexDirection={'column'} justifyContent={'center'} alignItems={'center'}>
      <Heading>New book</Heading>
      <form></form>
    </Stack>
  );
}

// function LoginForm() {
//   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) });
//
//   const { login } = useAuth();
//
//   return (
//     <form
//       onSubmit={handleSubmit(async values => {
//         const session = await login({
//           email: values.email,
//           password: values.password
//         });
//         if (session != null) window.history.back();
//       })}
//     >
//       <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}
//         >
//           <PasswordInput {...register('password')} />
//         </Field>
//         <Button type="submit">Sign in</Button>
//       </Stack>
//     </form>
//   );
// }