import EmailPasswordReact from "supertokens-auth-react/recipe/emailpassword";
import SessionReact from "supertokens-auth-react/recipe/session";
import { appInfo } from "./appInfo";

export const frontendConfig = () => {
  return {
    appInfo,
    recipeList: [EmailPasswordReact.init(), SessionReact.init()],
  };
};

import "../styles/globals.css";
import { QueryClient, QueryClientProvider } from "react-query";
import type { AppProps } from "next/app";
import SuperTokensReact from "supertokens-auth-react";
import EmailPassword from "supertokens-auth-react/recipe/emailpassword";

import { frontendConfig } from "../config/frontendConfig";
import dynamic from "next/dynamic";

if (typeof window !== "undefined") {
  // we only want to call this init function on the frontend, so we check typeof window !== 'undefined'
  SuperTokensReact.init(frontendConfig());
}

const EmailPasswordAuthNoSSR = dynamic(
  new Promise((res) => res(EmailPassword.EmailPasswordAuth)) as any,
  { ssr: false }
);

const queryClient = new QueryClient();

function MyApp({ Component, pageProps }: AppProps) {
  
  return (
    <EmailPasswordAuthNoSSR>
      <QueryClientProvider client={queryClient}>
        <Component {...pageProps} />
      </QueryClientProvider>
    </EmailPasswordAuthNoSSR>
  );
}

export default MyApp;