import { useMemoizedFn, useSetState } from 'ahooks'
import { useState } from 'react'
import { useHistory, useParams } from 'react-router-dom'

import StepsWizard from 'dbaas/components/StepsWizard'

import { DedicatedDMStep1, Step1FormFields } from './steps/Step1'
import { DedicatedDMStep2, Step2FormFields } from './steps/Step2'
import { DedicatedDMStep3 } from './steps/Step3'
import { DedicatedDMStep4 } from './steps/Step4'

export type FormData = Step1FormFields &
  Step2FormFields & {
    precheckId: string
  }

export const CreateDataMigrationDedicated = () => {
  const history = useHistory()
  const { id: clusterId } = useParams<{ id: string }>()
  const [step, setStep] = useState(0)
  const [formData, setFormData] = useSetState<FormData>({} as FormData)
  const onFinish = useMemoizedFn((data, shouldGoNextStep: boolean = true) => {
    setFormData(data)
    if (shouldGoNextStep) {
      setStep((s) => Math.min(s + 1, stepItems.length - 1))
    }
  })
  const onGoPrev = useMemoizedFn(() => {
    setStep((s) => Math.max(0, s - 1))
  })
  const onCancel = useMemoizedFn(() => {
    history.push(`/clusters/${clusterId}/data-migration`)
  })

  const stepItems = [
    {
      name: 'Configure source and target connection',
      content: <DedicatedDMStep1 formData={formData} onFinish={onFinish} onCancel={onCancel} />
    },
    {
      name: 'Choose the objects to be migrated',
      content: <DedicatedDMStep2 formData={formData} onFinish={onFinish} onGoPrev={onGoPrev} onCancel={onCancel} />
    },
    {
      name: 'Precheck',
      content: <DedicatedDMStep3 formData={formData} onFinish={onFinish} onGoPrev={onGoPrev} onCancel={onCancel} />
    },
    {
      name: 'Choose a spec and start migration',
      content: <DedicatedDMStep4 formData={formData} onGoPrev={onGoPrev} onCancel={onCancel} />
    }
  ]

  return <StepsWizard steps={stepItems} current={step} />
}