import { Routes, Route } from 'react-router-dom';

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

import { ImportRoutes } from './import';
import { MapDataPage } from './import/MapDataPage';
import { Klaviyo } from './klaviyo';
import { DatasetPage } from './collection';
import { Workspace } from './Workspace';
import { WorkspaceHeader } from './WorkspaceHeader';
import { WorkspaceAnalytics } from './overview/WorkspaceAnalytics';
import { FilteringPage } from './filtering/FilteringPage';

export const PATHS = {
  workspaceId: 'workspaceId',

  collections: 'collections',
  collection: 'collection',
  analytics: 'analytics',
  filter: 'filter',
  import: 'import',
  label: 'label',
  klaviyo: 'klaviyo',

  collectionId: 'collectionId',
};

export const WorkspacePage = () => {
  return (
    <Box height="100%" display="flex" column>
      <Routes>
        <Route index element={<Redirect to={PATHS.collections} />} />
        <Route
          path={PATHS.collections}
          element={withErrorBoundary(<Workspace />)}
        />
        <Route
          path={PATHS.analytics}
          element={withErrorBoundary(
            <>
              <WorkspaceHeader />
              <WorkspaceAnalytics />
            </>
          )}
        />
        <Route
          path={`${PATHS.collection}/:${PATHS.collectionId}/*`}
          element={withErrorBoundary(<DatasetPage />)}
        />
        <Route
          path={`${PATHS.filter}/*`}
          element={withErrorBoundary(<FilteringPage />)}
        />
        <Route
          path={`${PATHS.import}/*`}
          element={withErrorBoundary(<ImportRoutes />)}
        />
        <Route
          path={`${PATHS.label}/:${PATHS.collectionId}`}
          element={withErrorBoundary(<MapDataPage />)}
        />
        <Route
          path={`${PATHS.klaviyo}/*`}
          element={withErrorBoundary(<Klaviyo />)}
        />
      </Routes>
    </Box>
  );
};