//_app.jsx

import { useEffect } from "react"
import { QueryClient, QueryClientProvider } from "react-query"
import PropTypes from "prop-types"
import CssBaseline from "@mui/material/CssBaseline"
import AdapterDateFns from "@mui/lab/AdapterDateFns"
import LocalizationProvider from "@mui/lab/LocalizationProvider"
import { ThemeProvider } from "@mui/material/styles"
import { CacheProvider } from "@emotion/react"
import { SessionProvider, useSession, signIn } from "next-auth/react"
import { RecoilRoot, useRecoilState } from "recoil"
import { setUser } from "@sentry/nextjs"
import { ReactQueryDevtools } from "react-query/devtools"

import radiateTheme from "../app/components/radiateTheme"
import createEmotionCache from "../app/libraries/createEmotionCache"
import Loading from "../app/components/elements/Loading"
import { organisationIdAtom } from "../app/state/atoms"

// Client-side cache, shared for the whole session of the user in the browser.
const clientSideEmotionCache = createEmotionCache()
const queryClient = new QueryClient()

export default function MyApp(props) {
    const {
        Component,
        emotionCache = clientSideEmotionCache,
        pageProps: { session, ...pageProps },
    } = props

    return (
        <SessionProvider session={session}>
            <CacheProvider value={emotionCache}>
                <ThemeProvider theme={radiateTheme}>
                    <LocalizationProvider dateAdapter={AdapterDateFns}>
                        <RecoilRoot>
                            <QueryClientProvider client={queryClient}>
                                <CssBaseline />
                                <ReactQueryDevtools initialIsOpen={true} />
                                {Component.secure ? (
                                    <Auth>
                                        <Component {...pageProps} />
                                    </Auth>
                                ) : (
                                    <Component {...pageProps} />
                                )}
                            </QueryClientProvider>
                        </RecoilRoot>
                    </LocalizationProvider>
                </ThemeProvider>
            </CacheProvider>
        </SessionProvider>
    )
}

function Auth({ children }) {
    const { data: session, status } = useSession()
    const isUser = !!session?.user
    const [organisationId, setOrganisationId] = useRecoilState(organisationIdAtom)

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

    if (isUser) {
        setUser({ email: session.user.email }) // Attach user email to all Sentry reports
        if (organisationId == 0) {
            setOrganisationId(session.user.organisation_id)
        }
        return children
    }

    return <Loading />
}

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