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 { SharedCluster } from 'dbaas/features/ClusterManagement/cluster'
import { DefaultCSVFormat } from 'dbaas/features/Import'
import { CloudProviderConst } from 'dbaas/features/Project'
import { ImportFileTypeEnum, ImportSourceTypeEnum } from 'dbaas/services/api-clients/legacy/serverless/interface'

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

export const ImportFromCloud = ({ cluster }: { cluster: SharedCluster }) => {
  const [step, setStep] = useState(0)
  const isAliyunCluster = cluster.provider === CloudProviderConst.ALICLOUD
  const methods = useForm<ImportFromCloudFormData>({
    defaultValues: {
      storage_provider: ImportSourceTypeEnum.S3,
      source_uri: '',
      is_single_file: false,
      s3_bucket_access_method: isAliyunCluster ? 'access_key' : 'manual', // aliyun cluster only support access key if import from s3
      use_tidb_dumpling_naming_conventions: true,
      data_format: ImportFileTypeEnum.CSV,
      csv_format: DefaultCSVFormat,
      target_table_infos: [
        {
          target_table: {
            database: '',
            table: ''
          },
          custom_file: ''
        }
      ]
    }
  })
  const history = useHistory()
  const onGoPrev = useMemoizedFn(() => {
    setStep((s) => s - 1)
  })
  const onCancel = useMemoizedFn(() => {
    history.push(`/clusters/${cluster.id}/imports`)
  })
  const onFinish = useMemoizedFn(() => {
    setStep((s) => s + 1)
  })

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