import App from 'next/app';
import React from 'react';
import { Provider } from 'react-redux';
import withRedux from 'next-redux-wrapper';
import withReduxSaga from 'next-redux-saga';
import { SnackbarProvider } from 'notistack';
import loadable from '@loadable/component';
import { i18n, appWithTranslation } from '../i18n';

import createStore from '../config/configureStore';

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, store,
    } = this.props;

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

export default withRedux(createStore)(withReduxSaga({ async: true })(appWithTranslation(MainApp)));
