import { ThemeProvider as MuiThemeProvider } from "@mui/material/styles";
import { SnackbarProvider } from "notistack";
import Layout from "@/layout";
import { lightTheme } from "@/themes/index";
import "../styles/globals.css";
import YekanBakh from "@/components/fonts/index.jsx";
import { useEffect } from "react";
import { useRouter } from "next/router";
import NProgress from "nprogress";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

export default function App({ Component, pageProps }) {
  const queryClient = new QueryClient();
  const router = useRouter();

  useEffect(() => {
    const handleStart = () => NProgress.start();
    const handleComplete = () => NProgress.done();

    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]);

  return (
    <QueryClientProvider client={queryClient}>
      <main className={YekanBakh.className}>
        <MuiThemeProvider theme={lightTheme}>
          <SnackbarProvider
            maxSnack={3}
            dense
            anchorOrigin={{
              vertical: "bottom",
              horizontal: "right",
            }}
          >
            <Layout>
              <Component {...pageProps} />
            </Layout>
          </SnackbarProvider>
        </MuiThemeProvider>
      </main>
    </QueryClientProvider>
  );
}

export async function getServerSideProps({ res }) {
  res.setHeader("Cache-Control", "s-maxage=60, stale-while-revalidate");

  return {
    props: {},
  };
}
