import React from 'react';
import { hydrateRoot } from 'react-dom/client';
import { loadableReady } from '@loadable/component';
import Main from '@game/pages/main/main';
import { Hydrate, QueryClient, QueryClientProvider } from '@tanstack/react-query';

// @ts-ignore
const dehydratedState = window.__REACT_QUERY_STATE__;
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchInterval: false,
      refetchIntervalInBackground: false,
      refetchOnWindowFocus: false,
      staleTime: Infinity
    }
  }
});

loadableReady().then(() => {
  const element = document.getElementById('root')!;

  hydrateRoot(
    element,
    <QueryClientProvider client={queryClient}>
      <Hydrate state={dehydratedState}>
        <Main />
      </Hydrate>
    </QueryClientProvider>
  );
});
