import type { SubmitHandler } from 'react-hook-form'
import type { AuthContextType } from '~/hooks/use-auth'
import { useForm } from 'react-hook-form'
import { useAuth } from '~/hooks/use-auth'
import { Card } from '~/layouts/auth'
import { Control, Label, Input, Button } from '~/components/form'
import { useNavigate } from 'react-router'

type Input = {
  username: string
  password: string
}

export default function Signin() {
  const navigate = useNavigate()
  const { register, handleSubmit, formState } = useForm<Input>()
  const { signIn } = useAuth()

  const onSubmit: SubmitHandler<Input> = async (data) => {
    const { nextStep } = await signIn(data)
    return navigate('/')
  }

  return (
    <Card>
      <form onSubmit={handleSubmit(onSubmit)}>
        <Control>
          <Label>Email ou CPF</Label>
          <Input {...register('username')} />
        </Control>
        <Control>
          <Label>Senha</Label>
          <Input type="password" {...register('password')} />
        </Control>

        <Button type="submit" isLoading={formState.isSubmitting}>
          Entrar
        </Button>
      </form>
    </Card>
  )
}