import * as React from "react"
import Router from "next/router"
import { QueryClient, QueryClientProvider, Hydrate } from "@tanstack/react-query"
import { SessionProvider } from "next-auth/react"
import NProgress from "nprogress"
import { syncDrupalPreviewRoutes } from "next-drupal"
import "nprogress/nprogress.css"

import "styles/globals.css"
import "styles/mobile.css"

import { initPWA } from "lib/mobile/pwa"

NProgress.configure({ showSpinner: false })

Router.events.on("routeChangeStart", function (path) {
  syncDrupalPreviewRoutes(path)
  NProgress.start()
})
Router.events.on("routeChangeComplete", () => NProgress.done())
Router.events.on("routeChangeError", () => NProgress.done())

export default function App({ Component, pageProps: { session, ...pageProps } }) {
  const queryClientRef = React.useRef<QueryClient>()
  if (!queryClientRef.current) {
    queryClientRef.current = new QueryClient()
  }

  // Initialize PWA
  React.useEffect(() => {
    const cleanup = initPWA()
    return cleanup
  }, [])

  return (
    <SessionProvider session={session}>
      <QueryClientProvider client={queryClientRef.current}>
        <Hydrate state={pageProps.dehydratedState}>
          <Component {...pageProps} />
        </Hydrate>
      </QueryClientProvider>
    </SessionProvider>
  )
}