import { Card, Form, Input, Select } from 'antd'
import { useState } from 'react'
import { useParams } from 'react-router'

import {
  cloudConfigControllerCreateClusterConfigurationChange,
  cloudConfigControllerGetClusterConfiguration,
  cloudConfigControllerPreviewClusterConfigurationChange,
  useGetCluster
} from 'apiClient/services/devops'
import { cloudConfigControllerListClusterConfigurationChanges } from 'apiClient/services/devops'
import { CloudConfigControllerListClusterConfigurationChangesClusterType } from 'apiClient/services/devops/interface'

import CurrentConfig from './CurrentConfig/Current'
import ConfigHistories from './Histories'

export const finishResultOptions = [
  { label: 'succeeded', value: 'succeeded' },
  { label: 'failed', value: 'failed' }
]

export type FinishFormType = {
  result: string
  output: string
}

const tabList = [
  {
    key: 'current',
    tab: 'Current Config'
  },

  {
    key: 'histories',
    tab: 'Modification Histories'
  }
]

const ClusterConfig = () => {
  const [activeTabKey, setActiveTabKey] = useState<string>('current')
  const params = useParams<{
    cluster_id?: string
    resource_pool_id?: string
  }>()

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

  const onTabChange = (key: string) => {
    setActiveTabKey(key)
  }
  const { data, refetch } = useGetCluster(cluster_id, {
    query: {
      refetchInterval: false,
      refetchIntervalInBackground: false,
      refetchOnWindowFocus: false
    }
  })
  if (!data) {
    return null
  }
  const contentList: Record<string, React.ReactNode> = {
    histories: (
      <ConfigHistories
        changesAPI={cloudConfigControllerListClusterConfigurationChanges}
        changesParams={{
          cluster_type:
            data?.data.deploy_type === 'DEPLOY_TYPE_NEXTGEN'
              ? 'LOGICAL_CLUSTER'
              : data?.data.deploy_type === 'DEPLOY_TYPE_RESOURCE_POOL'
              ? 'SHARED_POOL'
              : 'DEDICATED_TIDB',
          cluster_id: cluster_id
        }}
      ></ConfigHistories>
    ),
    current: (
      <CurrentConfig
        getAPI={cloudConfigControllerGetClusterConfiguration}
        getParam={{
          cluster_type:
            data?.data.deploy_type === 'DEPLOY_TYPE_NEXTGEN'
              ? 'LOGICAL_CLUSTER'
              : data?.data.deploy_type === 'DEPLOY_TYPE_RESOURCE_POOL'
              ? 'SHARED_POOL'
              : 'DEDICATED_TIDB',
          cluster_id: cluster_id
        }}
        cacheAPI={cloudConfigControllerGetClusterConfiguration}
        cacheParam={{
          cluster_type:
            data?.data.deploy_type === 'DEPLOY_TYPE_NEXTGEN'
              ? 'LOGICAL_CLUSTER'
              : data?.data.deploy_type === 'DEPLOY_TYPE_RESOURCE_POOL'
              ? 'SHARED_POOL'
              : 'DEDICATED_TIDB',
          cluster_id: cluster_id
        }}
        previewAPI={cloudConfigControllerPreviewClusterConfigurationChange}
        previewParam={{
          cluster_type:
            data?.data.deploy_type === 'DEPLOY_TYPE_NEXTGEN'
              ? 'LOGICAL_CLUSTER'
              : data?.data.deploy_type === 'DEPLOY_TYPE_RESOURCE_POOL'
              ? 'SHARED_POOL'
              : 'DEDICATED_TIDB',
          cluster_id: cluster_id,
          change_type:
            data?.data.deploy_type === 'DEPLOY_TYPE_NEXTGEN'
              ? 'logicalcluster'
              : data?.data.deploy_type === 'DEPLOY_TYPE_RESOURCE_POOL'
              ? 'sharedpool'
              : 'fulltidb' // allow to modify all config
        }}
        createAPI={cloudConfigControllerCreateClusterConfigurationChange}
        createParam={{
          cluster_type:
            data?.data.deploy_type === 'DEPLOY_TYPE_NEXTGEN'
              ? 'LOGICAL_CLUSTER'
              : data?.data.deploy_type === 'DEPLOY_TYPE_RESOURCE_POOL'
              ? 'SHARED_POOL'
              : 'DEDICATED_TIDB',
          cluster_id: cluster_id,
          change_type:
            data?.data.deploy_type === 'DEPLOY_TYPE_NEXTGEN'
              ? 'logicalcluster'
              : data?.data.deploy_type === 'DEPLOY_TYPE_RESOURCE_POOL'
              ? 'sharedpool'
              : 'fulltidb' // allow to modify all config
        }}
        type="cluster"
        clusterType={
          data?.data.deploy_type === 'DEPLOY_TYPE_NEXTGEN'
            ? 'LOGICAL_CLUSTER'
            : data?.data.deploy_type === 'DEPLOY_TYPE_RESOURCE_POOL'
            ? 'SHARED_POOL'
            : 'DEDICATED_TIDB'
        }
      ></CurrentConfig>
    )
  }
  return (
    <div>
      <Card
        tabList={tabList}
        tabProps={{ size: 'middle' }}
        bordered={false}
        activeTabKey={activeTabKey}
        onTabChange={(key) => {
          onTabChange(key)
        }}
      >
        {contentList[activeTabKey]}
      </Card>
    </div>
  )
}

export default ClusterConfig