import { BrowserRouter as Router } from 'react-router-dom';
import { ApolloProvider } from '@apollo/client';

import AppSync from 'lib/appsync/client';

import UserProvider from './user';
import NotificationsProvider from './notifications';

import { ErrorBoundary } from 'components/ErrorBoundary';
import { ErrorFallback } from 'components/ErrorFallback';
import { LayersProvider } from 'components/layers';

const renderFallback = (error: Error) => <ErrorFallback error={error.message} />;

export const ContextProviders = ({ children }: { children: React.ReactNode }) => {
  return (
    <ErrorBoundary fallbackRender={renderFallback}>
      <ApolloProvider client={AppSync}>
        <Router>
          <UserProvider>
            <NotificationsProvider>
              <LayersProvider>{children}</LayersProvider>
            </NotificationsProvider>
          </UserProvider>
        </Router>
      </ApolloProvider>
    </ErrorBoundary>
  );
};