import { Button } from '@tidbcloud/uikit'
import { useHistory } from 'react-router-dom'

import { AccessDeniedHoverHint } from 'dbaas/contexts/access-control'
import { DataMigrationListPremium as DMListPremium } from 'dbaas/screens/Cluster/DataMigration/DMListPremium'
import { useSharedTiDBContext } from 'dbaas/screens/NextGen/tidb-mgmt-container/shared/tidb-context'
import { TiDBPageShell } from 'dbaas/screens/NextGen/tidb-mgmt-container/shared/TiDBPageShell'
import { MixpanelEvents } from 'dbaas/utils/tracking'

import { PremiumDmPageTitle } from './PremiumDmPageTitle'

const DataMigrationHeader = () => {
  const history = useHistory()
  const tidb = useSharedTiDBContext()

  return (
    <div>
      <AccessDeniedHoverHint id="TidbxDMAction">
        {({ accessible }) => (
          <Button
            size="sm"
            disabled={!accessible}
            onClick={() => {
              history.push(`/tidbs/${tidb?.tidbId}/data-migration/create`)
            }}
            data-mp-event={MixpanelEvents.PremiumDM.Create.ButtonClicked}
          >
            Create Migration Job
          </Button>
        )}
      </AccessDeniedHoverHint>
    </div>
  )
}

const DataMigrationListPremium = () => {
  return (
    <TiDBPageShell
      title={<PremiumDmPageTitle page="list">Data Migration</PremiumDmPageTitle>}
      headerProps={{
        rightSection: <DataMigrationHeader />
      }}
    >
      <DMListPremium />
    </TiDBPageShell>
  )
}

export default DataMigrationListPremium