import React, {useEffect} from 'react'
import {useRouter} from 'next/router'
import PropTypes from 'prop-types'
import {createMuiTheme, ThemeProvider} from '@material-ui/core/styles'
import CssBaseline from '@material-ui/core/CssBaseline'
import {Provider, useSession} from 'next-auth/client'

const darkTheme = createMuiTheme({
  palette: {
    type: 'dark',
    primary: {
      light: '#81c784',
      main: '#4caf50',
      dark: '#388e3c',
      contrastText: '#fff'
    }
  }
})

export default function MyApp(props) {
  const {Component, pageProps} = props

  useEffect(() => {
    const jssStyles = document.querySelector('#jss-server-side')
    if (jssStyles) {
      jssStyles.remove()
    }
  }, [])

  return (
    <ThemeProvider theme={darkTheme}>
      <CssBaseline />
      <Provider session={pageProps.session}>
        {Component.auth ? (
          <Auth><Component {...pageProps} /></Auth>
        ) : (
          <Component {...pageProps} />
        )}
      </Provider>
    </ThemeProvider>
  )
}

function Auth({children}) {
  const [session, loading] = useSession()
  const isUser = Boolean(session?.user)
  const router = useRouter()
  useEffect(() => {
    if (loading) {
      return
    }

    if (!isUser) {
      router.push('/kont')
    }
  }, [isUser, loading, router])

  if (isUser) {
    return children
  }

  return (
    <div>Loading...</div>
  )
}

MyApp.propTypes = {
  Component: PropTypes.elementType.isRequired,
  pageProps: PropTypes.object.isRequired
}

Auth.propTypes = {
  children: PropTypes.node.isRequired
}