import React from 'react'

import { Tabs } from '@mantine/core'
import {
  Outlet,
  Routes,
  Route,
  Navigate,
  useLocation,
  useNavigate
} from 'react-router-dom'

import { RouterMetaInfo } from '~/hooks/use-router-meta'
import { eventCenterTelemetry } from '~/telemetry/event-center'

import EventDetailPage from './detail'
import HistoryEventPage from './history'
import RecentEventPage from './recent'

const EventCenterPages: React.FC = () => {
  return (
    <Routes>
      <Route element={<EventCenterLayout />}>
        <Route index element={<Navigate replace to='history' />} />
        <Route
          path='recent'
          element={
            <RouterMetaInfo title='Recent Events'>
              <RecentEventPage />
            </RouterMetaInfo>
          }
        />
        <Route
          path='history'
          element={
            <RouterMetaInfo title='Historical Events'>
              <HistoryEventPage />
            </RouterMetaInfo>
          }
        />
      </Route>

      <Route
        path='detail/:eid'
        element={
          <RouterMetaInfo title='Event Detail'>
            <EventDetailPage />
          </RouterMetaInfo>
        }
      />

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

const EventCenterLayout: React.FC = () => {
  const location = useLocation()
  const navigate = useNavigate()
  const lastSegment = location.pathname.split('/').pop()
  return (
    <div className='bg-white'>
      <Tabs
        styles={{ tab: { padding: '16px 24px' } }}
        value={lastSegment}
        onTabChange={(v) => {
          navigate(v!)
          eventCenterTelemetry.clickTabs(v!)
        }}
      >
        <Tabs.List>
          <Tabs.Tab value='recent'>Recent Events</Tabs.Tab>
          <Tabs.Tab value='history'>Historical Events</Tabs.Tab>
        </Tabs.List>
      </Tabs>
      <div className='px-6 py-4'>
        <Outlet />
      </div>
    </div>
  )
}

export default EventCenterPages