import { useQuery } from '@apollo/client'
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 UserAdmin from '../components/user/UserAdmin'

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


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

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

export default withRouter(UserPage)