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 'pages/Tenants/ClusterDetail/Configs/CurrentConfig/Current'
import ConfigHistories from 'pages/Tenants/ClusterDetail/Configs/Histories'

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

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

const TiCDCConfig = ({
  availableFiles,
  clusterType
}: {
  availableFiles: string[]
  clusterType: string
}) => {
  const [activeTabKey, setActiveTabKey] = useState<string>('current')
  const { cluster_id, org_id, ticdc_cluster_id } = useParams<{
    cluster_id: string
    org_id: string
    ticdc_cluster_id: string
  }>()
  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: clusterType,
          cluster_id: ticdc_cluster_id
        }}
      ></ConfigHistories>
    ),
    current: (
      <CurrentConfig
        getAPI={cloudConfigControllerGetClusterConfiguration}
        getParam={{
          cluster_type: clusterType,
          cluster_id: ticdc_cluster_id
        }}
        cacheAPI={cloudConfigControllerGetClusterConfiguration}
        cacheParam={{
          cluster_type: clusterType,
          cluster_id: ticdc_cluster_id
        }}
        previewAPI={cloudConfigControllerPreviewClusterConfigurationChange}
        previewParam={{
          cluster_type: clusterType,
          cluster_id: ticdc_cluster_id,
          change_type: clusterType === 'TICDC_NG' ? 'ticdc_ng' : 'ticdc'
        }}
        createAPI={cloudConfigControllerCreateClusterConfigurationChange}
        createParam={{
          cluster_type: clusterType,
          cluster_id: ticdc_cluster_id,
          change_type: clusterType === 'TICDC_NG' ? 'ticdc_ng' : 'ticdc'
        }}
        type="cluster"
        clusterType="TICDC"
      ></CurrentConfig>
    )
  }
  return (
    <div>
      <Card
        tabList={tabList}
        tabProps={{ size: 'middle' }}
        bordered={false}
        activeTabKey={activeTabKey}
        onTabChange={(key) => {
          onTabChange(key)
        }}
      >
        {contentList[activeTabKey]}
      </Card>
    </div>
  )
}

export default TiCDCConfig