import { useEffect } from 'react'
import { useHistory } from 'react-router-dom'

import config from 'config'
import { PageAccessGuard } from 'dbaas/contexts/access-control'
import { SharedCluster } from 'dbaas/features/ClusterManagement/cluster'
import { CloudStorageLabelConst } from 'dbaas/features/Project'
import CreateExportBackup from 'dbaas/screens/Cluster/Backup/CreateExportBackup'
import { ClusterPageShell } from 'dbaas/screens/ClusterV2/components'

const ExportBackup = ({ cluster }: { cluster: SharedCluster }) => {
  const history = useHistory()
  const provider = cluster.provider

  useEffect(() => {
    document.title = `${config.PAGE_TITLE_PREFIX}Export Backup`
  }, [])

  return (
    <ClusterPageShell
      title={`Export Backup to ${CloudStorageLabelConst[provider]}`}
      headerProps={{
        withBack: true,
        onBackClick: () => {
          history.push(`/clusters/${cluster.id}/backup`)
        }
      }}
      bodyProps={{ mb: 80 }}
    >
      <PageAccessGuard id="ClusterBackupAction">
        <CreateExportBackup cluster={cluster} />
      </PageAccessGuard>
    </ClusterPageShell>
  )
}

export default ExportBackup