import '../styles/globals.css';
import NextProgress from "next-progress";
import { ToastContainer, Slide } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import Image from 'next/image';

function MyApp({ Component, pageProps }) {
  const router = useRouter();
  const [pageLoading, setPageLoading] = useState(false);

  useEffect(() => {
    const handleStartLoading = () => { setPageLoading(true) };
    const handleCompleteLoading = () => { setPageLoading(false) };

    router.events.on('routeChangeStart', handleStartLoading);
    router.events.on('routeChangeComplete', handleCompleteLoading);
    router.events.on('routeChangeError', handleCompleteLoading);
  }, [router]);

  return (
    <>
      <ToastContainer 
        position='top-center'
        autoClose={5000}
        theme='light'
        closeOnClick={false}
        transition={Slide}
        limit={1}
      />
      <NextProgress color="#D7A30A" options={{
        showSpinner: false,
      }} />
      {pageLoading ? (
        <div className='h-screen w-screen flex flex-col justify-center items-center'>
          <Image src='/images/loading.gif' width={64} height={64} alt='Loading Indoteknik' />
          <h1>Loading</h1>
        </div>
      ) : <Component {...pageProps} />}
    </>
  )
}

export default MyApp