import { useMutation } from '@apollo/react-hooks'

import { USER_REQUEST_PASSWORD } from './graphql'
import { useFormHandler, TextInput } from '../form/forms'
import { FormEvent } from 'react'


const initialValues = {
  email: '',
  password: ''
}

const RequestPassword = () => {

  const [login, { loading, error }] = useMutation(USER_REQUEST_PASSWORD)
  const { inputProps } = useFormHandler(initialValues)

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

export default RequestPassword