import { useMemoizedFn } from 'ahooks'
import { useState } from 'react'
import { FormProvider, useForm } from 'react-hook-form'
import { useHistory, useParams } from 'react-router-dom'

import StepsWizard from 'dbaas/components/StepsWizard'
import { PremiumDMTaskImportModeENUM, V1beta2PremiumDMTaskMode } from 'dbaas/services/dataflow/interface'

import type { PremiumDMFormData } from './CreateDataMigrationPremium.types'
import { PremiumDMStep1 } from './steps/Step1/PremiumDMStep1'
import { PremiumDMStep2 } from './steps/Step2/PremiumDMStep2'
import { PremiumDMStep3 } from './steps/Step3/PremiumDMStep3'
import { PremiumDMStep4 } from './steps/Step4/PremiumDMStep4'

export const CreateDataMigrationPremium = () => {
  const history = useHistory()
  const { id: clusterId } = useParams<{ id: string }>()
  const [step, setStep] = useState(0)
  const methods = useForm<PremiumDMFormData>({
    defaultValues: {
      // step1
      name: `migration_job_${Math.floor(Date.now() / 1000)}`,
      port: 3306,
      ssl: true,

      // step2
      full_instance_migrate: true,
      migration_mode: V1beta2PremiumDMTaskMode.ALL,
      selectObjectMethod: 'all',
      selectedObjectKeys: [],
      start_position_method: 'current',
      import_mode: PremiumDMTaskImportModeENUM.IMPORTMODE_LOGICAL,
      precheckId: '',
      sources: []
    }
  })
  const onFinish = useMemoizedFn(() => {
    setStep((s) => Math.min(s + 1, stepItems.length - 1))
  })
  const onGoPrev = useMemoizedFn(() => {
    setStep((s) => Math.max(0, s - 1))
  })
  const onCancel = useMemoizedFn(() => {
    history.push(`/tidbs/${clusterId}/data-migration`)
  })

  const stepItems = [
    {
      name: 'Configure source and target connection',
      content: <PremiumDMStep1 onFinish={onFinish} onCancel={onCancel} />
    },
    {
      name: 'Choose objects to be migrated',
      content: <PremiumDMStep2 onFinish={onFinish} onGoPrev={onGoPrev} onCancel={onCancel} />
    },
    {
      name: 'Precheck',
      content: <PremiumDMStep3 onFinish={onFinish} onGoPrev={onGoPrev} onCancel={onCancel} />
    },
    {
      name: 'Review and start migration',
      content: <PremiumDMStep4 onGoPrev={onGoPrev} onCancel={onCancel} />
    }
  ]

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