import { Flex, Loader, Stack } from '@tidbcloud/uikit'
import { observer } from 'mobx-react'

import { SharedCluster } from 'dbaas/features/ClusterManagement/cluster'

import { useEssentialDBAuditLogContext } from '../context/starter-context'

import { FilterRules } from './FilterRules/index'
import { AuditLogs } from './LogList'
import { LogSwitch } from './LogSettings'

export const Home = observer(({ cluster }: { cluster: SharedCluster }) => {
  const { isInitingConfig } = useEssentialDBAuditLogContext()

  return (
    <>
      {isInitingConfig ? (
        <Flex h="100%" align="center" justify="center">
          <Loader />
        </Flex>
      ) : (
        <Stack gap="xl">
          <LogSwitch cluster={cluster} />
          <FilterRules cluster={cluster} />
          <AuditLogs clusterId={cluster.id} />
        </Stack>
      )}
    </>
  )
})

export default Home