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 { ConfigureConnection } from 'dbaas/screens/Cluster/ImportV4/ImportFromCloudDedicated/step1'
import { ConfigureMapping } from 'dbaas/screens/Cluster/ImportV4/ImportFromCloudDedicated/step2'
import { Precheck } from 'dbaas/screens/Cluster/ImportV4/ImportFromCloudDedicated/step3'

import { defaultMappingRow, getDedicatedDefaultSourceType } from './helper'
import type { ImportFromCloudDedicatedFormData } from './types'

export default function ImportFromCloudDedicated({ cluster }: { cluster: SharedCluster }) {
  const [step, setStep] = useState(0)
  const history = useHistory()
  const defaultSourceType = getDedicatedDefaultSourceType(cluster.provider)
  const methods = useForm<ImportFromCloudDedicatedFormData>({
    defaultValues: {
      source_url: '',
      region: new URLSearchParams(window.location.search).get('region') || cluster.region,
      data_source_type: defaultSourceType,
      data_source_type_display: String(defaultSourceType),
      data_format: '3',
      use_tidb_dumpling_naming_conventions: true,
      csv_format: DefaultCSVFormat,
      target_table_infos: [defaultMappingRow()],
      bucketAccessMethod: 'manual',
      aws_role_arn: '',
      aws_access_key_id: '',
      aws_secret_access_key: '',
      azblob_sas_token: '',
      conn_method: 'direct',
      endpoint_service_name: '',
      is_single_file: false
    }
  })

  const onGoPrev = useMemoizedFn(() => {
    setStep((currentStep) => currentStep - 1)
  })

  const onCancel = useMemoizedFn(() => {
    history.push(`/clusters/${cluster.id}/imports`)
  })

  const onFinish = useMemoizedFn(() => {
    setStep((currentStep) => currentStep + 1)
  })

  const stepItems = [
    {
      name: 'Connection',
      content: <ConfigureConnection cluster={cluster} onCancel={onCancel} onFinish={onFinish} />
    },
    {
      name: 'Mapping',
      content: <ConfigureMapping cluster={cluster} onCancel={onCancel} onGoPrev={onGoPrev} onFinish={onFinish} />
    },
    {
      name: 'Pre-check',
      content: <Precheck cluster={cluster} onCancel={onCancel} onGoPrev={onGoPrev} />
    }
  ]

  return (
    <FormProvider {...methods}>
      <StepsWizard steps={stepItems} current={step} />
    </FormProvider>
  )
}