import { useEffect } from 'react';

import { useSession, signIn, SessionProvider } from "next-auth/react"
import '../styles/index.css'

function Auth({ children }) {
  const { data: session, status } = useSession()
  const isUser = !!session?.user

  useEffect(() => {
    if (status === 'loading') return // Do nothing while loading
    if (!isUser) signIn() // If not authenticated, force log in
  }, [isUser, status])

  if (isUser) {
    return children
  }

  // Session is being fetched, or no user.
  // If no user, useEffect() will redirect.
  return <div>Loading...</div>
}

export default function MyApp({ Component, pageProps: { session, ...pageProps } }) {

  return (
    <div className="wrapper">
      <SessionProvider session={session}>
        {Component.auth ? (
          <Auth>
            <Component {...pageProps} />
          </Auth>
        ) : (
          <Component {...pageProps} />
        )}
      </SessionProvider>
    </div>
  )
}