import { Button, FormInstance, Modal } from 'antd'
import { useCallback, useState } from 'react'
import { useParams } from 'react-router-dom'

import {
  cloudConfigControllerCreateClusterConfigurationChange,
  cloudConfigControllerGetClusterConfiguration,
  cloudConfigControllerPreviewClusterConfigurationChange
} from 'apiClient/services/devops'
import { CloudconfigClusterType } from 'apiClient/services/devops/interface'
import ModalForm from 'components/ModalForm'

import CurrentConfig from '../../Configs/CurrentConfig/Current'
import ChangeImageOperation from '../Image'

import VersionForm, { VersionFormType } from './VersionForm'

export default function UpgradeOperation({
  changeType,
  clusterType,
  cluster_id
}: {
  changeType: string
  clusterType: CloudconfigClusterType
  cluster_id: string
}) {
  const [versionForm, setVersionForm] = useState(false)
  const [imageForm, setImageForm] = useState(false)
  // const [previewForm, setPreviewForm] = useState(false)

  const [targetVersion, setTargetVersion] = useState<string>()

  const renderVersiontParamFields = useCallback((form: FormInstance) => {
    return (
      <VersionForm
        component={changeType}
        cluster_id={cluster_id}
        cluster_type={clusterType}
      />
    )
  }, [])

  const handleVersion = useCallback((payload: VersionFormType) => {
    setTargetVersion(payload.version)
    setVersionForm(false)
    setImageForm(true)
  }, [])

  const handleCancelVersion = useCallback(() => {
    setVersionForm(false)
  }, [])

  return (
    <div>
      <a
        onClick={() => {
          setVersionForm(true)
        }}
        style={{
          display: 'block',
          width: '100%',
          textAlign: 'left'
        }}
      >
        Upgrade {changeType}
      </a>
      <ModalForm<VersionFormType>
        title={'Choose the target version'}
        visible={!!versionForm}
        onCancel={handleCancelVersion}
        width={1000}
        name="version"
        getFields={renderVersiontParamFields}
        onSubmit={handleVersion}
        destoryOnClose={true}
        okText="Next"
      />
      <ChangeImageOperation
        imageForm={imageForm}
        setImageForm={setImageForm}
        version={targetVersion}
        changeType={changeType}
        clusterType={clusterType}
        cluster_id={cluster_id}
      ></ChangeImageOperation>
    </div>
  )
}