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

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

import CurrentConfig from '../../Configs/CurrentConfig/Current'
import { EditParamType } from '../../Configs/Forms/EditParamForm'

import ImageForm from './ImageForm'

export default function ChangeImageOperation({
  imageForm,
  setImageForm,
  version,
  changeType,
  clusterType,
  cluster_id
}: {
  imageForm: boolean
  setImageForm: Dispatch<SetStateAction<boolean>>
  version?: string
  changeType: string
  clusterType: CloudconfigClusterType
  cluster_id: string
}) {
  // const { cluster_id, org_id } = useParams<{
  //   cluster_id: string
  //   org_id: string
  // }>()

  const [upgradeForm, setUpgradeForm] = useState(false)
  const [componentsReq, setComponentsReq] =
    useState<CloudconfigChangeComponentReq[]>()

  const handleCancelImage = useCallback(() => {
    setImageForm(false)
  }, [])

  const handleOk = () => {
    setImageForm(false)
    setUpgradeForm(true)
  }

  return (
    <div>
      <Modal
        title={'Modify the Image'}
        visible={!!imageForm}
        onCancel={handleCancelImage}
        width={1000}
        destroyOnClose={true}
        okText={'Next'}
        onOk={handleOk}
      >
        <ImageForm
          getAPI={cloudConfigControllerGetClusterConfiguration}
          getParam={{
            cluster_type: clusterType,
            cluster_id: cluster_id
          }}
          cacheAPI={cloudConfigControllerPreviewClusterConfigurationChange}
          cacheParam={{
            cluster_type: clusterType,
            cluster_id: cluster_id,
            version: version ? { to_version: version } : undefined,
            change_type: changeType
          }}
          type="image"
          clusterType={clusterType}
          setComponentsReq={setComponentsReq}
        />
      </Modal>

      <Modal
        title={`Modify the parameters`}
        open={!!upgradeForm}
        onCancel={() => setUpgradeForm(false)}
        footer={null}
        width={1000}
        destroyOnClose={true}
      >
        <CurrentConfig
          getAPI={cloudConfigControllerGetClusterConfiguration}
          getParam={{
            cluster_type: clusterType,
            cluster_id: cluster_id
          }}
          cacheAPI={cloudConfigControllerPreviewClusterConfigurationChange}
          cacheParam={{
            cluster_type: clusterType,
            cluster_id: cluster_id,
            components: componentsReq,
            change_type: changeType,
            version: version ? { to_version: version } : undefined
          }}
          previewAPI={cloudConfigControllerPreviewClusterConfigurationChange}
          previewParam={{
            cluster_type: clusterType,
            cluster_id: cluster_id,
            change_type: changeType,
            version: version ? { to_version: version } : undefined,
            components: componentsReq
          }}
          createAPI={cloudConfigControllerCreateClusterConfigurationChange}
          createParam={{
            cluster_type: clusterType,
            cluster_id: cluster_id,
            change_type: changeType,
            version: version ? { to_version: version } : undefined,
            components: componentsReq
          }}
          type="upgrade"
          upgradeForm={setUpgradeForm}
          clusterType={clusterType}
        />
      </Modal>
    </div>
  )
}