import * as React from 'react';
import { RecoilRoot, useRecoilSnapshot } from 'recoil';
import type { AppProps } from 'next/app';
import { UserProvider } from '@auth0/nextjs-auth0';
import { appWithTranslation } from 'next-i18next';
import useMediaQuery from '@mui/material/useMediaQuery';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import { SnackbarProvider } from 'notistack';

import { theme as defaultTheme } from 'src/theme';

import '../styles/globals.css';
import '../styles/editor.css';
import '@fontsource/roboto/300.css';
import '@fontsource/roboto/400.css';
import '@fontsource/roboto/500.css';
import '@fontsource/roboto/700.css';

import 'src/components/Editor/Tiptap/style.css';

function MyApp({ Component, pageProps }: AppProps) {
  // const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');

  // const theme = React.useMemo(
  //   () =>
  //     createTheme({
  //       palette: {
  //         mode: prefersDarkMode ? 'dark' : 'light',
  //       },
  //     }),
  //   [prefersDarkMode]
  // );

  return (
    <UserProvider>
      <RecoilRoot>
        {process.env.NODE_ENV === 'development' && <DebugObserver />}
        <ThemeProvider theme={defaultTheme}>
          <CssBaseline />
          <SnackbarProvider maxSnack={3} autoHideDuration={5000}>
            <Component {...pageProps} />
          </SnackbarProvider>
        </ThemeProvider>
      </RecoilRoot>
    </UserProvider>
  );
}

function DebugObserver(): any {
  const snapshot = useRecoilSnapshot();
  React.useEffect(() => {
    console.debug('The following atoms were modified:');
    for (const node of snapshot.getNodes_UNSTABLE({ isModified: true })) {
      console.debug(node.key, snapshot.getLoadable(node));
    }
  }, [snapshot]);

  return null;
}

export default appWithTranslation(MyApp);