import { useEffect } from 'react'

import config from 'config'
import { SharedCluster } from 'dbaas/features/ClusterManagement/cluster'
import useStores from 'dbaas/stores/useStores'

import { ClusterPageShell } from '../../components'

import { ClusterEventsProvider } from './context'
import { getClusterEventsContext } from './context-impl'
import EventsPage from './EventsPage'

interface EventsProps {
  cluster: SharedCluster
}

const Events: React.FC<React.PropsWithChildren<EventsProps>> = ({ cluster }) => {
  useEffect(() => {
    document.title = `${config.PAGE_TITLE_PREFIX}Events`
  }, [])
  const {
    store: {
      tenantData: { id: orgId }
    }
  } = useStores()
  const apiPrefix = `/api/v1/orgs/${orgId}/clusters/${cluster.id}`

  return (
    <ClusterPageShell
      wrapperProps={{
        h: '100%',
        display: 'flex',
        sx: {
          flexDirection: 'column'
        }
      }}
      headerProps={{
        sx: {
          flex: 'none'
        }
      }}
      bodyProps={{
        sx: {
          flex: 'auto',
          overflow: 'auto'
        },
        px: 0,
        py: 0
      }}
      title="Events"
    >
      <ClusterEventsProvider
        value={getClusterEventsContext(apiPrefix, cluster.computed.isServerless ? 'serverless' : 'dedicated')}
      >
        <EventsPage />
      </ClusterEventsProvider>
    </ClusterPageShell>
  )
}

export default Events