import { withRouter } from 'next/router'

import { useCurrentUserQuery } from '../src/gql'

import {
  SignupForm,
  LoginForm,
  LogoutButton,
  RequestPassword,
  ResetPassword,
  UserDetails,
  DeleteUserButton
} from '../src/user'

const UserPage = () => {
  const { data, loading, error } = useCurrentUserQuery()
  console.log('UserPage', data, loading, error && error.message)
  const user = data && data.me

  if (loading) return <p>Loading user data...</p>
  if (error) return <p>Error loading user data.</p>

  return (
    <>
      {loading && <p>'Loading'</p>}
      {user ? <LogoutButton /> : <LoginForm />}
      <SignupForm />
      <RequestPassword />
      <ResetPassword />
      {user && <UserDetails user={user} />}
      {user && <DeleteUserButton user={user} />}
    </>
  )
}

export default withRouter(UserPage)