import { TextInput, useForm } from '../../form'
import { useContext } from 'react'
import { UserContext } from '../hooks'

const LoginForm = () => {
  const { values, onChange } = useForm({ email: '', password: '' })
  const { login } = useContext(UserContext)

  if (!login) return <p>Loading context.</p>
  const [userLogin, { error, loading }] = login

  return (
    <form
      onSubmit={async ev => {
        ev.preventDefault()
        const result = await userLogin({ variables: values })
        console.log('login', result)
      }}
    >
      <TextInput
        label='Email'
        name='email'
        value={values.email}
        onChange={onChange}
      />
      <TextInput
        label='Password'
        name='password'
        type='password'
        value={values.password}
        onChange={onChange}
      />
      <button type='submit' disabled={loading}>
        Login!
      </button>
      {error && <div className='error'>{error.message}</div>}
    </form>
  )
}

export default LoginForm
