import { Query, Mutation } from 'react-apollo'
import Link from 'next/link'
import { Formik, Form, Field, ErrorMessage } from 'formik'
import { email } from '../lib/regex'
import { adopt } from 'react-adopt'

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

const UserLoginForm = props => <p>Login Form</p>

const LoginAdoption = adopt({
  mutation: ({ render, formik }) => (
    <Mutation
      mutation={USER_LOGIN}
      refetchQueries={[{ query: CURRENT_USER }]}
    >{render}
    </Mutation>
  ),
  formik: ({ render, mutation }) => (
    <Formik
      initialValues={{ email: '', password: '' }}
      validate={values => {
        const errors = {}
        if (!values.email) errors.email = 'Required'
        else if (!email.test(values.email)) errors.email = 'Invalid email address'
        return errors
      }}
      onSubmit={(values, { setSubmitting }) => {
        mutation({ variables: values })
      }}
    >
      {render}
    </Formik>
  )
})

const LoginForm = props => (
  <LoginAdoption>
    {({ formik, mutation }) => {
      return (
        <Form>
          <Field type='email' name='email' />
          <ErrorMessage name='email' component='span' />
          <Field type='password' name='password' />
          <ErrorMessage name='password' component='span' />
          <button type='submit' disabled={formik.isSubmitting}>Login</button>
        </Form>
      )
    }}
  </LoginAdoption>
)

const UserNav = props => (
  <Query query={CURRENT_USER}>
    {
      ({ data, error, loading }) => {
        if (error) {
          return <LoginForm />
        }
        if (loading) return (<p>Loading...</p>)
        console.log(data)
        return (
          <Link href={{ pathname: 'user', query: { id: 12 } }}>
            <a>test {props.query}</a>
          </Link>
        )
      }
    }
  </Query>
)

const SignupForm = props => (
  <Formik
    initialValues={{ email: '', name: '', password: '', passwordAgain: '' }}
    onSubmit={values => {
      console.log('submitted', values)
    }}
  >
    {
      ({ isSubmitting }) => (
        <Form />
      )
    }
  </Formik>
)

const User = props => <a />

export { UserNav }
export default User