import { Button } from 'antd'
import { Dispatch, SetStateAction, useState } from 'react'
import { useParams } from 'react-router-dom'

import {
  CloudconfigChangeComponentReq,
  CloudconfigClusterType
} from 'apiClient/services/devops/interface'

import { GetCloudConfigController } from '../../Configs/CurrentConfig/Current'

import ChangeImageOperation from '.'

const ImageController = ({
  clusterType
}: {
  clusterType: CloudconfigClusterType
}) => {
  const [imageForm, setImageForm] = useState(false)
  const params = useParams<{
    cluster_id?: string
    resource_pool_id?: string
  }>()

  const cluster_id = params.cluster_id || params.resource_pool_id || ''

  return (
    <div>
      <a
        type="text"
        onClick={() => {
          setImageForm(true)
        }}
        style={{
          display: 'block',
          width: '100%',
          textAlign: 'left'
        }}
      >
        Modify Image
      </a>
      <ChangeImageOperation
        imageForm={imageForm}
        setImageForm={setImageForm}
        changeType={
          clusterType === 'LOGICAL_CLUSTER'
            ? 'logicalcluster'
            : clusterType === 'SHARED_POOL'
            ? 'sharedpool'
            : 'fulltidb' // allow to modify all config
        }
        clusterType={clusterType}
        cluster_id={cluster_id}
      ></ChangeImageOperation>
    </div>
  )
}
export default ImageController