import React from 'react'

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

import { AppLayout } from '~/components/Layout'
import { RouterMetaInfo } from '~/hooks/use-router-meta'
import OrgPages from '~/pages/org'

import OrgsListPage from './list'
import OrgsNewPage from './new'
import OrgsWelcomePage from './welcome'

const OrgsPageLayout: React.FC = () => {
  return (
    <AppLayout>
      <Outlet />
    </AppLayout>
  )
}

const OrgsPages: React.FC = () => {
  return (
    <Routes>
      <Route path='/' element={<OrgsPageLayout />}>
        <Route
          path='welcome'
          element={
            <RouterMetaInfo title='Orgs Welcome'>
              <OrgsWelcomePage />
            </RouterMetaInfo>
          }
        />
        <Route
          path='new'
          element={
            <RouterMetaInfo title='New Org'>
              <OrgsNewPage />
            </RouterMetaInfo>
          }
        />
        <Route
          index
          element={
            <RouterMetaInfo title='Orgs'>
              <OrgsListPage />
            </RouterMetaInfo>
          }
        />
      </Route>

      <Route path=':orgId/*' element={<OrgPages />} />
      <Route path='*' element={<Navigate replace to='/' />} />
    </Routes>
  )
}

export default OrgsPages