import { useMutation } from '@apollo/react-hooks'
import { Formik, Form } from 'formik'

import { USER_LOGIN, CURRENT_USER } from '../../lib/graphql'
import { TextInput } from '../../lib/forms'

const LoginAdoption = adopt({
  login: ({ render }) => (
    <Mutation mutation={USER_LOGIN} refetchQueries={[{ query: CURRENT_USER }]}>
      {(login, { data, error, loading }) =>
        render({ login, data, error, loading })
      }
    </Mutation>
  ),
  form: ({ login: { login }, render }) => (
    <Formik
      initialValues={{
        email: '',
        password: ''
      }}
      onSubmit={async values => {
        try {
          const user = await login({ variables: values })
          console.log(user)
        } catch (error) {
          console.log(error)
        }
      }}
    >
      {render}
    </Formik>
  )
})

const LoginForm = props => {
  const [login, {loading, error}] = useMutation(USER_LOGIN)
  const {data, loading, error} = useQuery(CURRENT_USER)
  if 
  return (
    <Form>
      <TextInput label='Email' name='email' type='email' placeholder='email' />
      <TextInput
        label='Password'
        name='password'
        type='password'
        placeholder='password'
      />
      <button type='submit'>Login!</button>
    </Form>
  )
}

export default LoginForm