import { useEffect } from 'react'

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

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

  return (
    <ClusterPageShell title="Create Migration Job" bodyProps={{ mb: 80 }} headerProps={{ withBack: true }}>
      <PageAccessGuard id={accessId} scopeProps={scopeProps}>
        <CreateDataMigaration cluster={cluster} />
      </PageAccessGuard>
    </ClusterPageShell>
  )
}

export default ClusterDMCreation