import '@/styles/globals.css'
import type { AppProps } from 'next/app'
import { LocalizationProvider } from '@mui/x-date-pickers'
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
import { primaryTheme } from '@/themes/primary'
import { ThemeProvider } from '@mui/material'
import { toast, ToastContainer} from 'react-toastify'
import 'react-toastify/dist/ReactToastify.css'
import { useRouter } from 'next/router'
import { useEffect } from 'react'
import { trpc } from '@/utils/trpc'
import { UserContextProvider } from '@/context/UserContext'

const App = ({ Component, pageProps }: AppProps) => {
  const router = useRouter();

  useEffect(() => {
    if (router.isReady) {
      //toast.info('router is ready')
    }
  }, [router]);

  useEffect(() => {
    // apply gradient background to body
    document.body.style.background = '#FFF';
    document.body.style.backgroundRepeat = 'no-repeat'
  }, []);
  
  return (
    <ThemeProvider theme={primaryTheme} >
      <LocalizationProvider dateAdapter={AdapterDayjs}>
        <UserContextProvider>
          <Component {...pageProps} />
          <ToastContainer autoClose={5000} theme='light' position='bottom-right' />
        </UserContextProvider>
      </LocalizationProvider>
    </ThemeProvider>
  )
}

export default trpc.withTRPC(App)