import { type AppType } from "next/app";
import { type Session } from "next-auth";
import { SessionProvider } from "next-auth/react";
import { api } from "../utils/api";
import "../styles/globals.css";
import { Component, useEffect } from "react";
import { RoomDataContextProvider } from "../utils/context/RoomDataContext";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const MyApp: AppType<{ session: Session | null }> = ({
  Component,
  pageProps: { session, ...pageProps },
}) => {
  useEffect(() => {
    const use = async () => {
      //@@ts-ignore   // eslint-disable-next-line
      ((await import("tw-elements" as string)) as ImportAssertions).default;
    };
    void use();
  }, []);

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

  return (
    <RoomDataContextProvider>
      <QueryClientProvider client={queryClient}>
        <SessionProvider session={session}>
          <Component {...pageProps} />
        </SessionProvider>
      </QueryClientProvider>
    </RoomDataContextProvider>
  );
};

export default api.withTRPC(MyApp);