import { Badge, Group } from '@tidbcloud/uikit'
import { useEffect } from 'react'

import config from 'config'
import { PageAccessGuard } from 'dbaas/contexts/access-control'
import { SharedCluster } from 'dbaas/features/ClusterManagement/cluster'
import DMList, { DataMigrationHeader } from 'dbaas/screens/Cluster/DataMigration'
import { ClusterPageShell } from 'dbaas/screens/ClusterV2/components'

const ClusterDMList = ({ cluster }: { cluster: SharedCluster }) => {
  useEffect(() => {
    document.title = `${config.PAGE_TITLE_PREFIX}Data Migration`
  }, [])
  const accessId = cluster.computed.isEssential ? 'TidbxDMView' : 'ClusterDMView'
  const scopeProps = cluster.computed.isEssential ? { tidbId: cluster.id } : undefined

  return (
    <ClusterPageShell
      title={
        <Group gap={8}>
          <span>Data Migration</span>

          {cluster.computed.isEssential && (
            <Badge variant="outline" size="sm" color="carbon" c="carbon.7" fw={500}>
              Preview
            </Badge>
          )}
        </Group>
      }
      headerProps={{
        rightSection: <DataMigrationHeader cluster={cluster} />
      }}
      bodyProps={{ px: 0 }}
    >
      <PageAccessGuard id={accessId} scopeProps={scopeProps}>
        <DMList cluster={cluster} />
      </PageAccessGuard>
    </ClusterPageShell>
  )
}

export default ClusterDMList