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

import config from 'config'
import { PageAccessGuard } from 'dbaas/contexts/access-control'
import ImportFromCloud from 'dbaas/screens/Cluster/ImportV3/ImportFromCloud'
import ImportFromLocalFile from 'dbaas/screens/Cluster/ImportV3/ImportFromLocalFile'
import { ClusterPageShell } from 'dbaas/screens/ClusterV2/components'
import useStores from 'dbaas/stores/useStores'

const ClusterImportCreation = () => {
  useEffect(() => {
    document.title = `${config.PAGE_TITLE_PREFIX}Import`
  }, [])
  const history = useHistory()
  const { id } = useParams<{ id: string }>()
  const {
    store: { currentCluster }
  } = useStores()
  const urlParams = new URLSearchParams(window.location.search)
  const from = urlParams.get('from') ?? ''
  const isFromLocal = from.toLowerCase() === 'local'
  const title = isFromLocal ? 'Import Local Data' : `Import Data from Cloud Storage`
  const accessCheckProps = currentCluster?.computed.isServerless
    ? {
        id: 'TidbxImportAction' as const
      }
    : {
        id: 'ClusterImportAction' as const
      }

  return (
    <ClusterPageShell
      title={title}
      headerProps={{
        withBack: true,
        onBackClick: () => {
          history.push(`/clusters/${id}/imports`)
        }
      }}
      bodyProps={{ mb: 80 }}
    >
      <PageAccessGuard {...accessCheckProps}>
        {isFromLocal ? <ImportFromLocalFile /> : <ImportFromCloud />}
      </PageAccessGuard>
    </ClusterPageShell>
  )
}

export default ClusterImportCreation