import { observer } from 'mobx-react'
import { useEffect } from 'react'

import config from 'config'
import { PageAccessGuard } from 'dbaas/contexts/access-control'
import { SharedCluster } from 'dbaas/features/ClusterManagement/cluster'
import DedicatedBackupList, {
  DedicatedBackupListHeader,
  ServerlessBackupListHeader
} from 'dbaas/screens/Cluster/Backup'
import { BackupListServerless } from 'dbaas/screens/Cluster/Backup/BackupListServerless'
import { ClusterPageShell } from 'dbaas/screens/ClusterV2/components'

interface ClusterBackupProps {
  cluster: SharedCluster
}

const ClusterBackup = ({ cluster }: ClusterBackupProps) => {
  const isServerless = cluster.computed.isServerless
  const accessCheckProps = isServerless
    ? {
        id: 'TidbxRead' as const
      }
    : {
        id: 'ClusterBackupView' as const
      }

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

  return (
    <ClusterPageShell
      headerProps={{
        rightSection: isServerless ? (
          <ServerlessBackupListHeader cluster={cluster} />
        ) : (
          <DedicatedBackupListHeader cluster={cluster} />
        )
      }}
      title="Backup"
      bodyProps={{ px: 0 }}
    >
      <PageAccessGuard {...accessCheckProps}>
        {isServerless ? <BackupListServerless /> : <DedicatedBackupList cluster={cluster} />}
      </PageAccessGuard>
    </ClusterPageShell>
  )
}

export default observer(ClusterBackup)