import { Suspense, lazy } from 'react';
import { Routes, Route } from 'react-router-dom';
import { PATHS as AUTH_PAGE } from 'pages/auth/AuthenticationPage';

import { Spinner } from 'components/common';
import { Redirect } from 'components/router/Redirect';
import { ErrorScreen } from 'components/ErrorScreen';
import { withErrorBoundary } from 'components/ErrorBoundary';

import { NavBar } from './NavBar';
import { AllianceRoutes } from 'pages/alliances';
import { AudienceManager } from 'pages/facebook';
import { WorkspaceRoutes } from 'pages/workspaces';
import { SubscriptionPage } from 'pages/subscription/SubscriptionPage';
import { Logout } from 'pages/auth/Logout';
import { RouteType } from 'types';

const SettingsPage = lazy(() => import('pages/settings'));

export const PATHS = {
  settings: 'settings',
  workspace: 'workspace',
  multiplayer: 'alliance',
  facebook: 'facebook',
  subscribe: 'subscribe',
};

const REDIRECTS: RouteType[] = [
  { path: AUTH_PAGE.signin, element: <Redirect to="/" /> },
  { path: AUTH_PAGE.signup, element: <Redirect to="/" /> },
  { path: AUTH_PAGE.complete, element: <Redirect to="/" /> },
  { path: AUTH_PAGE.confirm, element: <Redirect to="/" /> },
  { path: AUTH_PAGE.reset, element: <Redirect to="/" /> },
];

const ROUTES: RouteType[] = [
  ...REDIRECTS,
  {
    path: '/',
    element: <Redirect to={PATHS.workspace} />,
  },
  {
    path: `${PATHS.workspace}/*`,
    element: <WorkspaceRoutes />,
  },
  {
    path: `${PATHS.multiplayer}/*`,
    element: <AllianceRoutes />,
  },
  {
    path: `${PATHS.facebook}/*`,
    element: <AudienceManager />,
  },
  {
    path: `${PATHS.settings}/*`,
    element: <SettingsPage />,
  },
  {
    path: `${PATHS.subscribe}/*`,
    element: <SubscriptionPage />,
  },
  { path: AUTH_PAGE.logout, element: <Logout /> },
  {
    path: '*',
    element: <ErrorScreen message="Not found" />,
  },
];

export const HomePage = () => {
  return (
    <div className="flex overflowHidden" style={{ height: '100vh' }}>
      <NavBar />
      <div className="flexGrow overflowAuto">
        <Suspense fallback={<Spinner show />}>
          <Routes>
            {ROUTES.map((route) => {
              return (
                <Route
                  path={route.path}
                  element={withErrorBoundary(route.element)}
                  key={route.path}
                />
              );
            })}
          </Routes>
        </Suspense>
      </div>
    </div>
  );
};

export default HomePage;