import React, { Suspense, lazy } from 'react';
import { Redirect, Route, Switch } from 'react-router-dom';

import Loading from './PresentationalComponents/Loading/Loading';
import ErrorBoundary from './PresentationalComponents/ErrorBoundary/ErrorBoundary';
import LoadError from './PresentationalComponents/LoadError/LoadError';

const List = lazy(() => import(/* webpackChunkName: "List" */ './SmartComponents/Recs/List'));
const Details = lazy(() => import(/* webpackChunkName: "Details" */ './SmartComponents/Recs/Details'));
const paths = { list: '/preview', details: '/preview/:recDetail' };


export const Routes = () => <Switch>
    <Route exact path={paths.list}
        component={() => (
            <ErrorBoundary fallback={<LoadError bodyMessage='List' />}>
                <Suspense fallback={<Loading />}> <List /> </Suspense>
            </ErrorBoundary>
        )}
    />
    <Route exact path={paths.details}
        component={() => (
            //<ErrorBoundary fallback={<LoadError bodyMessage='Detail' />}>
                <Suspense fallback={<Loading />}> <Details /> </Suspense>
            //</ErrorBoundary>
        )}
    />
    <Redirect path='*' to={paths.list} push>
    </Redirect>
</Switch>;