import { FormEvent } from 'react'

import { useUserLoginMutation, CurrentUserDocument } from '../../graphql'
import { useFormHandler, TextInput } from '../form/forms'


const initialValues = {
  email: 'tomislav.cvetic@u-blox.com',
  password: '1234'
}

const LoginForm = () => {

  const [login, { loading, error }] = useUserLoginMutation()
  const { inputProps, values } = useFormHandler(initialValues)

  return (
    <form onSubmit={async (event: FormEvent) => {
      event.preventDefault()
      try {
        const data = await login({
          variables: values,
          refetchQueries: [{ query: CurrentUserDocument }]
        })
        console.log('LoginForm', data)
      } catch (error) {
        console.log('LoginForm', error)
      }
    }}>
      <TextInput label='Email' {...inputProps('email')} />
      <TextInput label='Password' {...inputProps('password')} />
      <button type='submit' disabled={loading}>Login!</button>
    </form>
  )
}

export default LoginForm