import Header from './Header'
import Meta from './Meta'
import Footer from './Footer'
import GlobalStyle from '../../styles/global'
import { useContext, FunctionComponent } from 'react'
import { UserContext } from '../../user/hooks'
import { LoginPage } from '../../user'

const Page: FunctionComponent = ({ children }) => {
  const { user } = useContext(UserContext)
  console.log(user)

  let content
  if (!user || user.loading) content = <p>Please wait...</p>
  else if (user.error) content = <p>Error logging in.</p>
  else if (user.data?.currentUser) content = children
  else content = <LoginPage />

  return (
    <>
      <Meta />

      <Header />
      <main>{content}</main>
      <Footer />

      <style jsx global>
        {GlobalStyle}
      </style>
    </>
  )
}

export default Page
