import { dayjs } from '@tidbcloud/uikit/utils'
import { useMemoizedFn } from 'ahooks'
import { useState } from 'react'
import { FormProvider, useForm } from 'react-hook-form'
import { useHistory } from 'react-router-dom'

import StepsWizard from 'dbaas/components/StepsWizard'
import { CloudProviderConst } from 'dbaas/features/Project/profile'
import { useSharedTiDBContext } from 'dbaas/screens/NextGen/tidb-mgmt-container/shared/tidb-context'
import { Adminapiv1beta2ImportSourceTypeEnum as PremiumImportSourceType } from 'dbaas/services/dataflow/interface'

import { ConfigureConnection } from './step1'
import { ConfigureMapping } from './step2'
import { Precheck } from './step3'
import type { ImportFromCloudFormData } from './types'

export const ImportFromCloud = () => {
  const cluster = useSharedTiDBContext()
  const [step, setStep] = useState(0)
  const isAliyunCluster = cluster.cloudProvider === CloudProviderConst.ALICLOUD
  const isAzureCluster = cluster.cloudProvider === CloudProviderConst.AZURE
  const methods = useForm<ImportFromCloudFormData>({
    defaultValues: {
      storage_provider: PremiumImportSourceType.ENUM_S3,
      source_uri: '',
      s3_bucket_access_method: isAliyunCluster || isAzureCluster ? 'access_key' : 'manual',
      use_tidb_dumpling_naming_conventions: true,
      job_name: `import-job-${dayjs().format('YYYY-MM-DD')}`,
      target_table_infos: [
        {
          filesWildcard: '',
          database: '',
          table: ''
        }
      ]
    }
  })
  const history = useHistory()
  const onGoPrev = useMemoizedFn(() => {
    setStep((s) => s - 1)
  })
  const onCancel = useMemoizedFn(() => {
    history.push(`/tidbs/${cluster.tidbId}/imports`)
  })
  const onFinish = useMemoizedFn(() => {
    setStep((s) => s + 1)
  })

  const stepItems = [
    {
      name: 'Source and Target Connection',
      content: <ConfigureConnection onCancel={onCancel} cluster={cluster} onFinish={onFinish} />
    },
    {
      name: 'Mapping and Job Configuration',
      content: <ConfigureMapping onCancel={onCancel} onGoPrev={onGoPrev} onFinish={onFinish} />
    },
    {
      name: 'Pre-check',
      content: <Precheck onCancel={onCancel} onGoPrev={onGoPrev} />
    }
  ]
  return (
    <FormProvider {...methods}>
      <StepsWizard steps={stepItems} current={step} />
    </FormProvider>
  )
}