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 { DmImportMode } from 'dbaas/features/DataMigration'
import { TaskMode } from 'dbaas/services/api-clients/legacy/serverless/interface'

import type { EssentialDMFormData } from './CreateDataMigrationEssential.types'
import { EssentialDMStep1 } from './steps/Step1/EssentialDMStep1'
import { EssentialDMStep2 } from './steps/Step2/EssentialDMStep2'
import { EssentialDMStep3 } from './steps/Step3/EssentialDMStep3'
import { EssentialDMStep4 } from './steps/Step4/EssentialDMStep4'

export const CreateDataMigrationEssential = () => {
  const history = useHistory()
  const { id: clusterId } = useParams<{ id: string }>()
  const [step, setStep] = useState(0)
  const methods = useForm<EssentialDMFormData>({
    defaultValues: {
      // step1
      name: `migration_job_${Math.floor(Date.now() / 1000)}`,
      data_source: '',
      connect_method_display_name: '',
      connect_method: '',
      host: '',
      service_endpoint: '',
      endpoint_id: '',
      port: 3306,
      ssl: true,
      username: '',
      password: '',
      cluster_username: '',
      cluster_password: '',

      // step2
      full_instance_migrate: true,
      migration_mode: TaskMode.MODE_ALL,
      selectObjectMethod: 'all',
      selectedObjectKeys: [],
      start_position_method: 'current',
      import_mode: DmImportMode.Logical,
      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(`/clusters/${clusterId}/data-migration`)
  })

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

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