import * as React from "react";
import "@/styles/globals.css";
import type { AppProps } from "next/app";
import { ThemeProvider, createTheme } from "@mui/material/styles";
import { PaletteMode } from "@mui/material";
import useMediaQuery from "@mui/material/useMediaQuery";
import { SnackbarProvider } from "notistack";
import { RecoilRoot, useRecoilSnapshot } from "recoil";
import * as gtag from "../lib/gtag";
import Head from "next/head";
import { useRouter } from "next/router";
import Script from "next/script";

import "@fontsource/roboto/300.css";
import "@fontsource/roboto/400.css";
import "@fontsource/roboto/500.css";
import "@fontsource/roboto/700.css";
import "@fontsource/inter";
import "@fontsource/space-mono";
import '@fontsource/ibm-plex-mono';

import { getDesignTokens } from "@/theme";
import "@/styles/github-markdown-light.css";

const ColorModeContext = React.createContext({ toggleColorMode: () => {} });

export default function App({ Component, pageProps }: AppProps) {
  const [mode, setMode] = React.useState<any>("light");
  const colorMode = React.useMemo(
    () => ({
      // The dark mode switch would invoke this method
      toggleColorMode: () => {
        setMode((prevMode: string) =>
          prevMode === "light" ? "dark" : "light"
        );
      },
    }),
    []
  );
  // Update the theme only if the mode changes
  const theme = React.useMemo(() => createTheme(getDesignTokens(mode)), [mode]);
  // const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");

  // React.useEffect(() => {
  //   setMode(prefersDarkMode ? "dark" : "light");
  // }, [prefersDarkMode]);

  const router = useRouter();

  React.useEffect(() => {
    // const mainDataLayer = {
    //   pageProps: pageProps || null,
    //   url: router.pathname,
    // };

    // gtag.gtmVirtualPageView(mainDataLayer);
    // Trigger the route change event for pageview
    gtag.gtmPageView({
      pageProps: pageProps || null,
      url: router.asPath,
    });
  }, [pageProps, router.asPath]);

  React.useEffect(() => {
    if (router?.pathname.startsWith("/play/")) {
      setMode("light");
    } else {
      setMode("v2light");
    }
  }, [router?.pathname]);

  return (
    <>
      {/* Google Tag Manager(gtm) - Google Analytics */}
      <Script id="google-tag-manager" strategy="afterInteractive">
        {`
        (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
        new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
        'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
        })(window,document,'script','dataLayer','${gtag.ALL_WEBSITES_GTM_ID}');
      `}
      </Script>
      <Script id="google-tag-manager" strategy="afterInteractive">
        {`
        (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
        new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
        'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
        })(window,document,'script','dataLayer','${gtag.GTM_ID}');
      `}
      </Script>
      <ColorModeContext.Provider value={colorMode}>
        <ThemeProvider theme={theme}>
          <RecoilRoot>
            <DebugObserver />
            <SnackbarProvider maxSnack={3}>
              <Component {...pageProps} />
            </SnackbarProvider>
          </RecoilRoot>
        </ThemeProvider>
      </ColorModeContext.Provider>
    </>
  );
}

function DebugObserver(): JSX.Element {
  const snapshot = useRecoilSnapshot();
  React.useEffect(() => {
    if (process.env.NODE_ENV !== "development") return;
    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 <></>;
}