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

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


const initialValues = {
  email: ''
}

const RequestPassword = () => {

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

  return (
    <form onSubmit={async (event: SyntheticEvent) => {
      event.preventDefault()
    }}>
      <TextInput label='Email' {...inputProps('email')} />
      <button type='submit' disabled={loading}>Request new password</button>
    </form>
  )
}

export default RequestPassword