import type { AppProps } from "next/app";
import Head from "next/head";
import Script from "next/script";
import { Analytics } from "@vercel/analytics/react";
import { Montserrat, Open_Sans } from "next/font/google";
import { IntlProvider } from "react-intl";
import { QueryClient, QueryClientProvider } from "react-query";
import { useRouter } from "next/router";
import { useMemo } from "react";

import "styles/globals.css";
import { Layout } from "components/layout";
import { PremiumContext, usePremiumHook } from "components/premium/premium";
import { PremiumModal } from "components/premium/modal";

import LANGUAGES from "languages";

const queryClient = new QueryClient({
  defaultOptions: {
    queries: { retry: 1, staleTime: 30000, refetchOnWindowFocus: false },
  },
});

const montserrat = Montserrat({
  variable: "--font-montserrat",
  subsets: ["latin"],
});

const inter = Open_Sans({
  variable: "--font-inter",
  subsets: ["latin"],
});

export default function App({ Component, pageProps }: AppProps) {
  const { locale }: any = useRouter();
  const messages = useMemo(() => {
    switch (locale) {
      case "en":
        return LANGUAGES.en;
      case "hu":
        return LANGUAGES.hu;
      case "fr":
        return LANGUAGES.fr;
      case "cz":
        return LANGUAGES.cz;
      case "uk":
        return LANGUAGES.uk;
      case "de":
        return LANGUAGES.de;
      case "es":
        return LANGUAGES.es;
      case "gr":
        return LANGUAGES.gr;
      case "da":
        return LANGUAGES.da;
      case "ru":
        return LANGUAGES.ru;
      case "tk":
        return LANGUAGES.tk;
      case "ch":
        return LANGUAGES.ch;
      case "it":
        return LANGUAGES.it;
      default:
        return LANGUAGES.en;
    }
  }, [locale]);

  const premiumHook = usePremiumHook();
  return (
    <IntlProvider locale={locale} messages={messages} onError={() => null}>
      <QueryClientProvider client={queryClient}>
        <Head>
          <Script
            id="Adsense-id"
            data-ad-client="ca-pub-8484207875368959"
            async={true}
            strategy="beforeInteractive"
            src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
          />
          <Script
            async
            strategy="afterInteractive"
            src="https://www.googletagmanager.com/gtag/js?id=G-SC2WGRS3MX"
          ></Script>
          <Script
            strategy="afterInteractive"
            dangerouslySetInnerHTML={{
              __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag() {
              dataLayer.push(arguments);
            }
            gtag("js", new Date());
      
            gtag("config", "G-SC2WGRS3MX");
            `,
            }}
          />
          <style global={true}>{`
            * {
              font-family: ${inter.style.fontFamily};
            }
            .font-title {
              font-family: ${montserrat.style.fontFamily};
            }
          `}</style>
        </Head>
        <PremiumContext.Provider value={{ ...premiumHook } as any}>
          <Layout className={`${inter.variable} ${montserrat.variable}`}>
            <Component {...pageProps} />
            <PremiumModal />
          </Layout>
        </PremiumContext.Provider>
        <Analytics />
      </QueryClientProvider>
    </IntlProvider>
  );
}
