import { useQuery } from '@apollo/react-hooks'
import { withRouter } from 'next/router'

import SignupForm from '../components/user/SignupForm'
import LoginForm from '../components/user/LoginForm'
import LogoutButton from '../components/user/LogoutButton'
import RequestPassword from '../components/user/RequestPassword'
import ResetPassword from '../components/user/ResetPassword'
import UserEditForm from '../components/user/UserEditForm'
import UserDetails from '../components/user/UserDetails'
import DeleteUserButton from '../components/user/DeleteUserButton'

import { CURRENT_USER } from '../components/user/graphql'


const UserPage = () => {
  console.log('UserPage, entering')
  const { data, loading, error } = useQuery(CURRENT_USER)
  console.log('UserPage', data, loading, error && error.message)

  return (
    <>
      {error && <LoginForm />}
      {data && <LogoutButton />}
      <p>{error && error.message}</p>
    </>
  )

  /*return (
    <>
      {data && data.me.name}
      {error && error.message}
      {loading && 'Loading'}
      <SignupForm />
      {!data && <LoginForm />}
      {data && <LogoutButton />}
      <RequestPassword />
      <ResetPassword />
      {data && <UserEditForm user={data.me} />}
      {data && <UserDetails user={data.me} />}
      {data && <DeleteUserButton user={data.me} />}
      {<p>{error && error.message}</p>}
    </>
  )*/
}

export default withRouter(UserPage)