import { Badge, Group } from '@tidbcloud/uikit'
import { useEffect } from 'react'
import { useHistory, useParams } from 'react-router-dom'

import config from 'config'
import { PageAccessGuard } from 'dbaas/contexts/access-control'
import { ExportTargets } from 'dbaas/features/Import'
import { PageShell as ClusterPageShell } from 'dbaas/layouts/v5/page'
import { CreateExport } from 'dbaas/screens/Cluster/ImportV3/CreateExport'

export default function ExportCreation() {
  const history = useHistory()
  const { id } = useParams<{ id: string }>()
  const type = new URLSearchParams(window.location.search).get('target')

  const target = ExportTargets.find((target) => target.value === type)?.label
  const title = target ? `Export Data to ${target}` : 'Export Data'

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

  return (
    <ClusterPageShell
      title={
        <Group gap={8}>
          <span>{title}</span>
          <Badge variant="outline" size="sm" color="carbon" c="carbon.7" fw={500}>
            Preview
          </Badge>
        </Group>
      }
      headerProps={{
        withBack: true,
        onBackClick: () => {
          history.push(`/clusters/${id}/exports`)
        }
      }}
      bodyProps={{ mb: 80 }}
    >
      <PageAccessGuard id="TidbxExportAction">
        <CreateExport />
      </PageAccessGuard>
    </ClusterPageShell>
  )
}