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

import { SharedCluster } from 'dbaas/features/ClusterManagement/cluster'
import { compareVersion } from 'dbaas/utils/chore'

import { useDedicatedDBAuditLogContext } from '../context/dedicated-context'

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

export const Home = observer(({ cluster }: { cluster: SharedCluster }) => {
  const { config, isInitingConfig } = useDedicatedDBAuditLogContext()

  const isV2Avaiable = compareVersion(cluster.version, '7.1.0', '>=')

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

export default Home