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'

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

  const onSubmit = async (payload) => {
    const { nextStep } = await signIn(payload)
    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>
  )
}