import { FunctionComponent, useContext } from 'react'
import AdminSideBar from './AdminSideBar'
import { UserContext } from '../../user/hooks'
import { LoginPage } from '../../user'

const AdminPage: 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 (
    <div className='admin-page'>
      <AdminSideBar />
      <div className='admin-content'>{content}</div>

      <style jsx>{`
        @media (min-width: 768px) {
          .admin-page {
            display: grid;
            grid-template-columns: 300px 1fr;
          }
        }
      `}</style>
    </div>
  )
}

export default AdminPage
