import { Table, Space, Typography } from 'antd'
import { ColumnsType } from 'antd/lib/table'
import { useMemo } from 'react'
import { Link, useParams } from 'react-router-dom'

import { K8supgradeK8sCluster } from 'apiClient/services/devops/interface'

import { useGetK8sUpgradeTask } from '../../../../apiClient/services/devops'

export const TaskExcludedClusterList: React.FC = () => {
  const columns = useMemo(() => {
    const cols: ColumnsType<K8supgradeK8sCluster> = [
      {
        title: 'Name',
        width: 150,
        fixed: 'left',
        dataIndex: 'name',
        render: (_, record) => (
          <Space direction="vertical">
            {record.name ? (
              <Typography.Text
                style={{ width: 180 }}
                ellipsis={{ tooltip: record.name }}
              >
                {record.name}
              </Typography.Text>
            ) : (
              <span style={{ color: '#aaa' }}>-</span>
            )}
          </Space>
        )
      },
      {
        title: 'Action',
        key: 'action',
        fixed: 'right',
        render: (_: any, record: K8supgradeK8sCluster) => (
          <Space>
            <Link
              to={`/infraInformation/${record.name}?cloud_provider=${record.cloud_provider}`}
            >
              Detail
            </Link>
          </Space>
        ),
        width: 100
      }
    ]

    return cols
  }, [])
  const { task_id } = useParams<{ task_id: string }>()
  const { data } = useGetK8sUpgradeTask(
    task_id,
    { with_excluded_k8s_clusters: true },
    {
      query: { refetchOnWindowFocus: false, refetchInterval: false }
    }
  )

  if (!data) {
    return <></>
  }

  if (data.data.excluded_k8s_clusters!.length === 0) {
    return <></>
  }

  return (
    <>
      <Table<K8supgradeK8sCluster>
        columns={columns}
        rowKey="id"
        dataSource={data?.data.excluded_k8s_clusters}
        loading={false}
        // pagination={false}
        // onChange={onTableChange}
        size="small"
        scroll={{ x: 1200 }}
      />
    </>
  )
}