import { Card } from 'antd'
import { useState } from 'react'

import {
  cloudConfigControllerCreateClusterConfigurationChange,
  cloudConfigControllerGetClusterConfiguration,
  cloudConfigControllerPreviewClusterConfigurationChange
} from 'apiClient/services/devops'
import { cloudConfigControllerListClusterConfigurationChanges } from 'apiClient/services/devops'
import { CloudconfigClusterType } 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 ChangefeedConfig = ({
  clusterType,
  changefeedId
}: {
  clusterType: string
  changefeedId: string
}) => {
  const [activeTabKey, setActiveTabKey] = useState<string>('current')
  const onTabChange = (key: string) => {
    setActiveTabKey(key)
  }
  const contentList: Record<string, React.ReactNode> = {
    histories: (
      <ConfigHistories
        changesAPI={cloudConfigControllerListClusterConfigurationChanges}
        changesParams={{
          cluster_type: clusterType,
          cluster_id: changefeedId
        }}
      ></ConfigHistories>
    ),
    current: (
      <CurrentConfig
        getAPI={cloudConfigControllerGetClusterConfiguration}
        getParam={{
          cluster_type: clusterType,
          cluster_id: changefeedId
        }}
        cacheAPI={cloudConfigControllerGetClusterConfiguration}
        cacheParam={{
          cluster_type: clusterType,
          cluster_id: changefeedId
        }}
        previewAPI={cloudConfigControllerPreviewClusterConfigurationChange}
        previewParam={{
          cluster_type: clusterType,
          cluster_id: changefeedId,
          change_type:
            clusterType === 'CHANGEFEED_NG'
              ? 'changefeed_ng'
              : clusterType === 'CHANGEFEED_ESSENTIAL'
              ? 'changefeed_essential'
              : 'changefeed'
        }}
        createAPI={cloudConfigControllerCreateClusterConfigurationChange}
        createParam={{
          cluster_type: clusterType,
          cluster_id: changefeedId,
          change_type:
            clusterType === 'CHANGEFEED_NG'
              ? 'changefeed_ng'
              : clusterType === 'CHANGEFEED_ESSENTIAL'
              ? 'changefeed_essential'
              : 'changefeed'
        }}
        type="cluster"
        clusterType={clusterType as CloudconfigClusterType}
      ></CurrentConfig>
    )
  }
  return (
    <div>
      <Card
        tabList={tabList}
        tabProps={{ size: 'middle' }}
        bordered={false}
        activeTabKey={activeTabKey}
        onTabChange={(key) => {
          onTabChange(key)
        }}
      >
        {contentList[activeTabKey]}
      </Card>
    </div>
  )
}

export default ChangefeedConfig