import { Button, Tooltip } from 'antd'
import Table, { ColumnsType } from 'antd/lib/table'
import { Link, useParams } from 'react-router-dom'

import { cloudConfigControllerListInternalChangefeeds } from 'apiClient/services/devops'
import { CloudconfigInternalChangefeed } from 'apiClient/services/devops/interface'
import { useTable } from 'components/Table'
import { toLocal } from 'pages/Devops/Maintenance/Detail'

const mapDeployTypeToClusterType = (deploy_type: string) => {
  switch (deploy_type) {
    case 'DEPLOY_TYPE_DEDICATED':
      return 'DEDICATED_TIDB'
    case 'DEPLOY_TYPE_RESOURCE_POOL':
      return 'SHARED_POOL'
    case 'DEPLOY_TYPE_NEXTGEN':
      return 'LOGICAL_CLUSTER'
    case 'DEPLOY_TYPE_SERVERLESS':
      return 'CHANGEFEED_ESSENTIAL'
    default:
      return ''
  }
}

const mapDeployTypeToCDCClusterType = (deploy_type: string) => {
  switch (deploy_type) {
    case 'DEPLOY_TYPE_DEDICATED':
      return 'TICDC'
    case 'DEPLOY_TYPE_RESOURCE_POOL':
      return 'TICDC_NG'
    case 'DEPLOY_TYPE_NEXTGEN':
      return 'TICDC_NG'
    default:
      return ''
  }
}

const mapDeployTypeToChangefeedType = (deploy_type: string) => {
  switch (deploy_type) {
    case 'DEPLOY_TYPE_DEDICATED':
      return 'CHANGEFEED'
    case 'DEPLOY_TYPE_RESOURCE_POOL':
      return 'CHANGEFEED_NG'
    case 'DEPLOY_TYPE_NEXTGEN':
      return 'CHANGEFEED_NG'
    case 'DEPLOY_TYPE_SERVERLESS':
      return 'CHANGEFEED_ESSENTIAL'
    default:
      return ''
  }
}

type TiCDCListProps = {
  deploy_type: string
}

export default function TiCDCList({ deploy_type }: TiCDCListProps) {
  const params = useParams<{
    cluster_id?: string
    resource_pool_id?: string
    org_id?: string
  }>()
  const cluster_id = params.cluster_id || params.resource_pool_id || ''
  const org_id = params.org_id || ''

  const getData = (params?: Partial<PageInfo>) =>
    cloudConfigControllerListInternalChangefeeds(
      mapDeployTypeToClusterType(deploy_type),
      cluster_id
    ).then((response) => ({
      ...response,
      data: {
        items: response.data.changefeeds
      }
    }))

  const { dataSource, loading, paginationProps, onTableChange } = useTable<
    ListData<CloudconfigInternalChangefeed>
  >(getData, [], {
    pagination: true
  })

  const columns: ColumnsType<CloudconfigInternalChangefeed> = [
    {
      title: 'Changefeed',
      render: (_: any, record) => {
        return record.display_name
      }
    },
    {
      title: 'ID',
      render: (_: any, record) => {
        return record.display_id
      }
    },
    {
      title: 'Destination',
      render: (_: any, record) => {
        return record.downstream_type
      }
    },
    {
      title: 'Status',
      render: (_: any, record) => {
        return record.status
      }
    },
    {
      title: 'TiCDC Cluster',
      render: (_: any, record) => {
        if (deploy_type === 'DEPLOY_TYPE_SERVERLESS') {
          return record.arch === 'replication_worker'
            ? 'Legacy'
            : record.ticdc_cluster_name || '-'
        }

        return (
          record.ticdc_cluster && (
            <Button type="link" size="small" style={{ padding: '0 4px' }}>
              <Link
                target="_blank"
                to={`/orgs/${org_id}/clusters/${cluster_id}/ticdc_clusters/${
                  record.ticdc_cluster.id
                }?cluster_type=${mapDeployTypeToCDCClusterType(deploy_type)}`}
              >
                {record.ticdc_cluster.name}
              </Link>
            </Button>
          )
        )
      }
    },
    {
      title: 'Create Time',
      render: (_: any, record) => {
        return toLocal(record.created_at)
      }
    },
    {
      title: 'Action',
      render: (_: any, record) => {
        if (!record.id) {
          return (
            <Tooltip title="Detail is unavailable until the kernel changefeed is ready.">
              <span>
                <Button
                  type="link"
                  size="small"
                  style={{ padding: '0 4px' }}
                  disabled
                >
                  Detail
                </Button>
              </span>
            </Tooltip>
          )
        }
        return (
          <Button type="link" size="small" style={{ padding: '0 4px' }}>
            <Link
              target="_blank"
              to={`/orgs/${org_id}/clusters/${cluster_id}/changefeeds/${
                record.id
              }?cluster_type=${mapDeployTypeToChangefeedType(deploy_type)}`}
            >
              Detail
            </Link>
          </Button>
        )
      }
    }
  ]
  return (
    <div>
      <Table<CloudconfigInternalChangefeed>
        columns={columns}
        rowKey="display_id"
        dataSource={dataSource}
        loading={loading}
        pagination={paginationProps}
        size="small"
        onChange={onTableChange}
      ></Table>
    </div>
  )
}