/* eslint-disable global-require */
import { ApolloProvider } from '@apollo/client';
import { QueryClientProvider } from '@tanstack/react-query';
import { ConfigProvider } from 'antd';
import 'antd/dist/antd.less';
import Layout from 'Components/Layout';
import type { AppProps } from 'next/app';
import Head from 'next/head';
import 'normalize.css';
import { useMemo } from 'react';
import StoreProvider from 'stores/Provider';
import { ThemeProvider } from 'styled-components';
import { GlobalStyle } from 'UIKit/colors';
import theme from 'UIKit/theme';
import '../styles/fonts.css';
import '../styles/globals.css';

import ruRU from 'antd/lib/locale/ru_RU';
import initializeQueryClient from 'api/client';
import initializeApollo from 'apollo/client';

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

function App({ Component, pageProps }: AppProps) {
  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={ruRU}>
          <ApolloProvider client={apolloClient}>
            <QueryClientProvider client={queryClient}>
              <Layout>
                <Component {...pageProps} />
              </Layout>
            </QueryClientProvider>
          </ApolloProvider>
        </ConfigProvider>
      </StoreProvider>
    </ThemeProvider>
  );
}

export default App;
