import App from 'next/app';
import React from 'react';
import { SnackbarProvider } from 'notistack';
import loadable from '@loadable/component';
import { i18n, appWithTranslation } from '../i18n';
import { StoreProvider } from '../store';

const GlobalStyle = loadable(() => import('../global/styled'));

class MainApp extends App {
  static async getInitialProps({ Component, ctx }) {
    let pageProps = {};

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps({ ctx });
    }

    return { pageProps };
  }

  render() {
    const {
      Component,
      pageProps,
    } = this.props;

    return (
      <StoreProvider>
        <SnackbarProvider maxSnack={3}>
          <GlobalStyle lang={i18n.language} />
          <Component {...pageProps} />
        </SnackbarProvider>
      </StoreProvider>
    );
  }
}

export default appWithTranslation(MainApp);