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

import {
  cloudConfigControllerCreateTenantInitConfigurationChange,
  cloudConfigControllerGetTenantInitConfiguration,
  cloudConfigControllerPreviewTenantInitConfigurationChange,
  cloudConfigControllerListTenantInitConfigurationChanges
} from 'apiClient/services/devops'
import { CloudconfigChangeComponentReq } from 'apiClient/services/devops/interface'
import { CloudconfigClusterType } from 'apiClient/services/devops/interface'
import CurrentConfig from 'pages/Tenants/ClusterDetail/Configs/CurrentConfig/Current'
import ImageForm from 'pages/Tenants/ClusterDetail/Operations/Image/ImageForm'

import TenantConfigHistories from './Histories'
import ConfigHistories from './Histories'

const tabList = [
  {
    key: 'current',
    tab: 'Init Configs'
  },

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

interface TenantInitConfigProps {
  org_id: string
  clusterType?: CloudconfigClusterType
}

const TenantInitConfig = ({ org_id, clusterType }: TenantInitConfigProps) => {
  const [activeTabKey, setActiveTabKey] = useState<string>('current')
  const [upgradeForm, setUpgradeForm] = useState(false)
  const onTabChange = (key: string) => {
    setActiveTabKey(key)
  }
  const [imageForm, setImageForm] = useState(false)
  const handleCancelImage = useCallback(() => {
    setImageForm(false)
  }, [])

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

  const [componentsReq, setComponentsReq] =
    useState<CloudconfigChangeComponentReq[]>()
  const contentList: Record<string, React.ReactNode> = {
    current: (
      <CurrentConfig
        getAPI={cloudConfigControllerGetTenantInitConfiguration}
        getParam={{
          cluster_type: clusterType,
          tenant_id: org_id
        }}
        cacheAPI={cloudConfigControllerGetTenantInitConfiguration}
        cacheParam={{
          cluster_type: clusterType,
          tenant_id: org_id
        }}
        previewAPI={cloudConfigControllerPreviewTenantInitConfigurationChange}
        previewParam={{
          cluster_type: clusterType,
          change_type:
            clusterType === 'LOGICAL_CLUSTER'
              ? 'logicalcluster'
              : clusterType === 'SHARED_POOL'
              ? 'sharedpool'
              : 'fulltidb',
          tenant_id: org_id
        }}
        createAPI={cloudConfigControllerCreateTenantInitConfigurationChange}
        createParam={{
          cluster_type: clusterType,
          change_type:
            clusterType === 'LOGICAL_CLUSTER'
              ? 'logicalcluster'
              : clusterType === 'SHARED_POOL'
              ? 'sharedpool'
              : 'fulltidb',
          tenant_id: org_id
        }}
        type="tenant"
        clusterType={
          clusterType as
            | 'DEDICATED_TIDB'
            | 'TICDC'
            | 'CHANGEFEED'
            | 'SHARED_POOL'
            | 'LOGICAL_CLUSTER'
        }
      ></CurrentConfig>
    ),
    histories: (
      <ConfigHistories
        changesAPI={cloudConfigControllerListTenantInitConfigurationChanges}
        changesParams={{
          cluster_type: clusterType,
          tenant_id: org_id
        }}
      ></ConfigHistories>
    )
  }

  return (
    <div>
      {clusterType == 'SHARED_POOL' && (
        <div>
          <Button onClick={() => setImageForm(true)}>Modify the images</Button>
          <Modal
            title={'Modify the Image'}
            visible={!!imageForm}
            onCancel={handleCancelImage}
            width={1000}
            destroyOnClose={true}
            okText={'Next'}
            onOk={handleOk}
          >
            <ImageForm
              getAPI={cloudConfigControllerGetTenantInitConfiguration}
              getParam={{
                cluster_type: clusterType,
                tenant_id: org_id
              }}
              cacheAPI={
                cloudConfigControllerPreviewTenantInitConfigurationChange
              }
              cacheParam={{
                cluster_type: clusterType,
                tenant_id: org_id,
                change_type: 'sharedpool'
              }}
              type="image"
              setComponentsReq={setComponentsReq}
            />
          </Modal>
          <Modal
            title={`Modify the parameters`}
            visible={!!upgradeForm}
            onCancel={() => setUpgradeForm(false)}
            footer={null}
            width={1000}
            destroyOnClose={true}
          >
            <CurrentConfig
              getAPI={cloudConfigControllerGetTenantInitConfiguration}
              getParam={{
                cluster_type: clusterType,
                tenant_id: org_id
              }}
              cacheAPI={
                cloudConfigControllerPreviewTenantInitConfigurationChange
              }
              cacheParam={{
                cluster_type: clusterType,
                components: componentsReq,
                tenant_id: org_id,
                change_type: 'sharedpool'
              }}
              previewAPI={
                cloudConfigControllerPreviewTenantInitConfigurationChange
              }
              previewParam={{
                cluster_type: clusterType,
                tenant_id: org_id,
                change_type: 'sharedpool',
                components: componentsReq
              }}
              createAPI={
                cloudConfigControllerCreateTenantInitConfigurationChange
              }
              createParam={{
                cluster_type: clusterType,
                tenant_id: org_id,
                change_type: 'sharedpool',
                components: componentsReq
              }}
              type="upgrade"
              upgradeForm={setUpgradeForm}
              clusterType={clusterType}
            />
          </Modal>
        </div>
      )}
      <Card
        tabList={tabList}
        tabProps={{ size: 'middle' }}
        bordered={false}
        activeTabKey={activeTabKey}
        onTabChange={(key) => {
          onTabChange(key)
        }}
      >
        {contentList[activeTabKey]}
      </Card>
    </div>
  )
}

export default TenantInitConfig