import '../styles/globals.css'

import { store } from 'store/store'
import { Provider } from 'react-redux'
import { Component } from 'react'

import { ReactElement } from 'react'
import type { AppProps } from 'next/app'
import PageWithLayoutType from '../components/layout/pageWithLayouts'
import { SessionProvider } from 'next-auth/react'
//import { StyledEngineProvider } from '@mui/material/styles';
import StyledEngineProvider from '@mui/material/StyledEngineProvider';
// import "styles/Home.module.css";

import CompsNavigationLoader from '../components/layout/CompsNavigationLoader';

import { config } from '@fortawesome/fontawesome-svg-core' // 👈
import '@fortawesome/fontawesome-svg-core/styles.css' // 👈

/* import styles from 'styles/Home.module.css'; */
import { useSession } from 'next-auth/react';
import React from 'react';

import CompsWaitingLoader from 'components/operations/CompsWaitingLoaderGeneral';

config.autoAddCss = false

type AppLayoutProps = AppProps & {
   Component: PageWithLayoutType
  pageProps: any
}

function MyApp({ Component, pageProps: { session, ...pageProps } }: AppLayoutProps) {

const Layout = Component.layout || ((children: ReactElement) => <>{children}</>)

return (
          <>
            <CompsNavigationLoader />
            <Provider store={store}>
              <SessionProvider session={session}>
                <StyledEngineProvider injectFirst>
                  <>
                      {/* {Component.auth ? (
                          <Auth>
                            <Layout>
                            <Component {...pageProps} />
                            </Layout>
                          </Auth>
                      ) : ( */}
                          <Layout>
                            <Component {...pageProps} />
                          </Layout>
                       {/* )} */}
                  </>
                </StyledEngineProvider>
              </SessionProvider>
           </Provider>
           </>
      )
}

function Auth({ children }) {
	const { status } = useSession({ required: true })

  const [openLoader, setOpenLoader] = React.useState(true);
  const [actionTitle, setActionTitle] = React.useState('Please wait loading dreamschool system...');

	if(status === 'loading'){
    return <>
    <CompsWaitingLoader openLoader={openLoader} actionTitle={actionTitle} />
             </>
	}

	return children
}

export default MyApp
