import { Mutation } from 'react-apollo'
import { adopt } from 'react-adopt'
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 => (
  <LoginAdoption>
    {({ form, mutation }) => (
      <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>
    )}
  </LoginAdoption>
)

export default LoginForm