import { AppProps } from "next/app";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";

import Head from "next/head";
import GlobalState from "../context/GlobalState";
import "../styles/index.less";
import Loading from "../components/Loading";
import Script from "next/script";
import useRedirectToWWW from "../utils/useRedirectToWWW";
import { baseUrl, web_url } from "../constants/urls";
function MyApp({ Component, pageProps }: AppProps) {
  const [showChild, setShowChild] = useState(false);
  const [showLoader, setShowLoader] = useState(true);
  const router = useRouter();
  const [state, setState] = useState({
    isRouteChanging: false,
    loadingKey: 0,
  });

  // if (web_url == "https://indispare.com") useRedirectToWWW();

  useEffect(() => {
    const handleRouteChangeStart = () => {
      setState((prevState) => ({
        ...prevState,
        isRouteChanging: true,
        loadingKey: prevState.loadingKey ^ 1,
      }));
    };

    const handleRouteChangeEnd = () => {
      setState((prevState) => ({
        ...prevState,
        isRouteChanging: false,
      }));
    };

    router.events.on("routeChangeStart", handleRouteChangeStart);
    router.events.on("routeChangeComplete", handleRouteChangeEnd);
    router.events.on("routeChangeError", handleRouteChangeEnd);

    return () => {
      router.events.off("routeChangeStart", handleRouteChangeStart);
      router.events.off("routeChangeComplete", handleRouteChangeEnd);
      router.events.off("routeChangeError", handleRouteChangeEnd);
    };
  }, [router.events]);
  useEffect(() => {
    setShowChild(true);
    if (typeof window !== "undefined") {
      const loader = document.getElementById("globalLoader");
      setTimeout(() => {
        setShowLoader(false);
      }, 2500);
      if (loader) loader.remove();
    }
  }, []);

  if (!showChild) {
    return null;
  }
  if (typeof window === "undefined") {
    return <></>;
  } else {
    return (
      <GlobalState>
        <div>
          {router.pathname !== "/" && (
            <Loading
              isRouteChanging={state.isRouteChanging}
              key={state.loadingKey}
            />
          )}
          <Head>
            <title>Indispare</title>
            <meta
              name="description"
              content="India's No1 E-Commerce Platform for Industrial Spares and Consumables"
            />
            <meta name="description" content="https://www.indispare.com" />

            {/* <script src="/sc.js" /> */}

            <meta
              name="viewport"
              content="width=device-width, initial-scale=1, maximum-scale=1"
            />
          </Head>

          {/* {showLoader && <div id="globalLoader">
            <img src="https://myquotesclub.com/wp-content/uploads/2019/02/Happy-Holi-GIF-for-Whatsapp.gif" alt="" />
          </div> } */}
          <Component key={router.asPath} {...pageProps} />
        </div>
      </GlobalState>
    );
  }
}
export default MyApp;