/* eslint-disable global-require */
import { ApolloProvider } from '@apollo/client';
import { QueryClientProvider } from '@tanstack/react-query';
import Layout from 'Components/Layout';
import Head from 'next/head';
import 'normalize.css';
import { useMemo } from 'react';
import StoreProvider from 'stores/Provider';
import { ThemeProvider } from 'styled-components';
import { trpcClient } from 'trpc/client';
import { GlobalStyle } from 'ui/colors';
import { ConfigProvider, ru_RU } from 'ui/elements/config';
import 'ui/elements/styles/antd.less';
import theme from 'ui/theme';
import '../styles/fonts.css';
import '../styles/globals.css';

import initializeQueryClient from 'api/client';
import initializeApollo from 'apollo/client';

if (process.env.NODE_ENV === 'development') {
  require('../mocks');
}

function App({ Component, pageProps }) {
  const { initialApolloState, initialQueryState } = pageProps;
  const apolloClient = useMemo(() => initializeApollo(initialApolloState), [initialApolloState]);
  const queryClient = useMemo(() => initializeQueryClient(initialQueryState), [initialQueryState]);

  return (
    <ThemeProvider theme={theme}>
      <Head>
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0"
        />
      </Head>
      <GlobalStyle />
      <StoreProvider {...pageProps}>
        <ConfigProvider locale={ru_RU}>
          <ApolloProvider client={apolloClient}>
            <QueryClientProvider client={queryClient}>
              <Layout>
                <Component {...pageProps} />
              </Layout>
            </QueryClientProvider>
          </ApolloProvider>
        </ConfigProvider>
      </StoreProvider>
    </ThemeProvider>
  );
}

export default trpcClient.withTRPC(App);
