import { gql } 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 { PasswordInput } from '@client/components/ui/password-input';
import { Session } from '@generated/types';
import { valibotResolver } from '@hookform/resolvers/valibot';
import { createFileRoute, useNavigate } from '@tanstack/react-router';
import { useForm } from 'react-hook-form';
import * as v from 'valibot';
import { useToastMutation } from '../hooks/useToastMutation';

export const Route = createFileRoute('/register')({
  component: RegisterComponent
});

function RegisterComponent() {
  return (
    <Stack flexDirection={'column'} justifyContent={'center'} alignItems={'center'}>
      <Heading>Sign up</Heading>
      <SignUpForm />
    </Stack>
  );
}

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

function SignUpForm() {
  const navigate = useNavigate();
  const { update: signUp } = useToastMutation<Session>({
    mutation,
    successMsg: 'Account created successfully'
  });

  const schema = v.pipe(
    v.object({
      email: v.pipe(v.string(), v.nonEmpty('Email is required'), v.email('Invalid email')),
      username: v.pipe(v.string(), v.nonEmpty('Username is required')),
      password: v.pipe(
        v.string(),
        v.nonEmpty('Password is required'),
        v.minLength(8, 'Needs to be at least 8 characters')
      ),
      confirm_password: v.pipe(v.string(), v.nonEmpty('Confirm your password'))
    }),
    v.forward(
      v.check(input => input.password === input.confirm_password, 'Passwords do not match'),
      ['confirm_password']
    )
  );

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

  const onSubmit = handleSubmit(async values => {
    await signUp({
      variables: {
        input: {
          email: values.email,
          username: values.username,
          password: values.password
        }
      }
    });
    navigate({
      to: '/login'
    });
  });

  return (
    <form onSubmit={onSubmit}>
      <Stack>
        <Field label="Email" invalid={errors.email != null} errorText={errors.email?.message}>
          <Input {...register('email')} />
        </Field>
        <Field
          label="Username"
          invalid={errors.username != null}
          errorText={errors.username?.message}
        >
          <Input {...register('username')} />
        </Field>
        <Field
          label="Password"
          invalid={errors.password != null}
          errorText={errors.password?.message}
        >
          <PasswordInput {...register('password')} />
        </Field>
        <Field
          label="Confirm password"
          invalid={errors.confirm_password != null}
          errorText={errors.confirm_password?.message}
        >
          <PasswordInput {...register('confirm_password')} />
        </Field>
        <Button type="submit">Submit</Button>
      </Stack>
    </form>
  );
}

const mutation = gql`
  mutation AuthSignUp($input: RegisterInput!) {
    signUp(input: $input)
  }
`;