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

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

function App({ Component, pageProps }: AppProps) {
  const apolloClient = useApollo(pageProps.initialApolloState);

  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}>
        <Layout>
          <ApolloProvider client={apolloClient}>
            <Component {...pageProps} />
          </ApolloProvider>
        </Layout>
      </StoreProvider>
    </ThemeProvider>
  );
}

export default App;
