import type { AppProps } from 'next/app';
import { ReactElement, ReactNode, Suspense, useState, useEffect, useCallback } from 'react';
import DefaultLayout from '../components/Layouts/DefaultLayout';
import { Provider } from 'react-redux';
import store from '../store/index';
import Head from 'next/head';
import { appWithI18Next } from 'ni18n';
import { ni18nConfig } from '@/ni18n.config';

import { useRouter } from 'next/router';
// Perfect Scrollbar
import 'react-perfect-scrollbar/dist/css/styles.css';

import '../styles/tailwind.css';
import '../styles/neo-brutal.css';
import '../styles/windows-xp.css';
import '../styles/global.css';

import { NextPage } from 'next';
import dynamic from 'next/dynamic';
const LoadingText = () => <p>Loading...</p>;

const Loading = dynamic(() => import('@/components/Loading'), {
    loading: LoadingText,
});
import { GoogleOAuthProvider } from '@react-oauth/google';
import { MantineProvider } from '@mantine/core';
import '@mantine/core/styles.css';
import 'mantine-datatable/styles.css';

export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
    getLayout?: (page: ReactElement) => ReactNode;
};

type AppPropsWithLayout = AppProps & {
    Component: NextPageWithLayout;
};

const App = ({ Component, pageProps }: AppPropsWithLayout) => {
    const getLayout = Component.getLayout ?? ((page) => <DefaultLayout>{page}</DefaultLayout>);
    const [loading, setLoading] = useState(false);

    const handleStart = useCallback(() => setLoading(true), []);
    const handleComplete = useCallback(() => {
        setTimeout(() => setLoading(false), 100);
    }, []);
    const router = useRouter();

    useEffect(() => {
        router.events.on('routeChangeStart', handleStart);
        router.events.on('routeChangeComplete', handleComplete);
        router.events.on('routeChangeError', handleComplete);

        return () => {
            router.events.off('routeChangeStart', handleStart);
            router.events.off('routeChangeComplete', handleComplete);
            router.events.off('routeChangeError', handleComplete);
        };
    }, [router, handleStart, handleComplete]);

    return (
        <Provider store={store}>
            <MantineProvider forceColorScheme="light" theme={{ fontFamily: 'inherit' }}>
            <Head>
                <title>Aurum Lab - Dashboard</title>
                <meta charSet="UTF-8" />
                <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
                <meta name="viewport" content="width=device-width, initial-scale=1.0" />
                <link rel="icon" href="/Aurum Lab Icon.ico" />
            </Head>
            {loading && <Loading />}

            {getLayout(
                <GoogleOAuthProvider clientId={`${process.env.GOOGLE_CLIENT_ID}`}>
                    <Component {...pageProps} />
                </GoogleOAuthProvider>
            )}
            </MantineProvider>
        </Provider>
    );
};
const I18nApp = appWithI18Next(App, ni18nConfig) as NextPage;
export default I18nApp;