/* eslint-disable react/display-name */
import React, { Suspense, lazy } from 'react';
import { Redirect, Route, Switch } from 'react-router-dom';

import { Permissions } from './Components/Permissions';

const SigRoutes = lazy(() => import(/* webpackChunkName: "Signatures" */ './Routes/Signatures/Routes'));
const SysRoutes = lazy(() => import(/* webpackChunkName: "Systems" */ './Routes/Systems/Routes'));

const paths = [
    { title: 'Signatures', path: '/signatures:?', render: ()=><Permissions><SigRoutes /></Permissions> },
    { title: 'Signatures', path: '/signatures', render: ()=><Permissions><SigRoutes /></Permissions> },
    { title: 'Systems', path: '/systems:?', render: ()=><Permissions><SysRoutes /></Permissions> },
    { title: 'Systems', path: '/systems', render: ()=><Permissions><SysRoutes /></Permissions> }
];

export const Routes = () => (
    <Suspense>
        <Switch>
            {paths.map((path) => (
                <Route
                    key={path.title}
                    {...path}
                />
            ))}
            <Redirect path="/signatures" to={`${paths[1].path}`} push />
            {/* Finally, catch all unmatched routes */}
            <Redirect path="*" to={`${paths[1].path}`} push />
        </Switch>
    </Suspense>
);