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

import { DelayedPageLoader } from 'dbaas/components/Placeholder'
import { useNextGenMode } from 'dbaas/features/Organization/mode'
import useStores from 'dbaas/stores/useStores'

import {
  General,
  Projects,
  Users,
  APIKeys,
  Authentication,
  Billing,
  Groups,
  OrgAuditLog,
  UsersV2,
  APIKeysV2,
  Integrations
} from '../features'

export const OrgSettingsRoutes = observer(() => {
  const { isNextGen } = useNextGenMode()
  const {
    store: { config }
  } = useStores()

  const enablePremium = config.premiumEnabled

  return (
    <Suspense fallback={<DelayedPageLoader />}>
      <Switch>
        <Route path="/org-settings/general" exact>
          {/*
              Render your page here.
              Refer to `src/dbaas/screens/ClusterV2/Container/Routes.tsx`
          */}
          <General />
        </Route>
        <Route path="/org-settings/projects" exact>
          <Projects />
        </Route>
        <Route path="/org-settings/users" exact>
          {isNextGen || enablePremium ? <UsersV2 /> : <Users />}
        </Route>
        <Route path="/org-settings/api-keys" exact>
          {isNextGen || enablePremium ? <APIKeysV2 /> : <APIKeys />}
        </Route>
        <Route path="/org-settings/authentication" exact>
          <Authentication />
        </Route>
        <Route path="/org-settings/groups" exact>
          <Groups />
        </Route>
        <Route path="/org-settings/billing">
          <Billing />
        </Route>
        <Route path="/org-settings/audit-log">
          <OrgAuditLog />
        </Route>
        <Route path="/org-settings/integrations" exact>
          <Integrations />
        </Route>
        <Redirect from="/org-settings" to="/org-settings/general" />
      </Switch>
    </Suspense>
  )
})