import { observer } from 'mobx-react'
import { Suspense } from 'react'
import { Redirect, Route, Switch } from 'react-router-dom'

import { DelayedPageLoader } from 'dbaas/components/Placeholder'

import {
  Alerts,
  Clusters,
  Integrations,
  Network,
  RecycleBinList,
  RecycleBinDetail,
  MaintenanceWindow,
  EncryptionAccess,
  RecoveryGroup,
  RestoreForDedicatedFromRecycleBin
} from '../features'

import { useAdminNavList } from './helpers'

export const ProjectAdminRoutes = observer(() => {
  const adminNavList = useAdminNavList()

  return (
    <Suspense fallback={<DelayedPageLoader />}>
      <Switch>
        <Route path="/project/clusters" exact>
          <Clusters />
        </Route>
        <Route path="/project/recycle-bin/:id" exact>
          <RecycleBinDetail />
        </Route>
        <Route path="/project/recycle-bin/:id/backup/:backupId/restore" exact>
          <RestoreForDedicatedFromRecycleBin />
        </Route>
        <Route path="/project/recycle-bin" exact>
          <RecycleBinList />
        </Route>
        <Route path="/project/network-access">
          <Network />
        </Route>
        {adminNavList.findIndex((i) => i.path.includes('recovery-group')) && (
          <Route path="/project/recovery-group">
            <RecoveryGroup />
          </Route>
        )}
        <Route path="/project/alerts" exact>
          <Alerts />
        </Route>
        <Route path="/project/integrations" exact>
          <Integrations />
        </Route>
        <Route path="/project/maintenance-window" exact>
          <MaintenanceWindow />
        </Route>
        <Route path="/project/encryption-access/:drawer?" exact>
          <EncryptionAccess />
        </Route>
        <Redirect from="/project" to={'/project/clusters'} />
      </Switch>
    </Suspense>
  )
})