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

import {
  K8supgradeK8sInfo,
  K8supgradeTiDBClusterInfraInfo
} from 'apiClient/services/devops/interface'

import { formatO11yNodeVersion, O11Y_TIDB_NODES } from './o11yNodes'

export const ClusterList: React.FC<
  React.PropsWithChildren<{ k8sInfo: K8supgradeK8sInfo }>
> = ({ k8sInfo }) => {
  const org_id = k8sInfo.tenant_id
  const columns = useMemo(() => {
    let tidb_node_version, cdc_node_version, dm_node_version
    let o11y_tidb_node_version

    const cols: ColumnsType<K8supgradeTiDBClusterInfraInfo> = [
      {
        title: 'Cluster',
        width: 150,
        fixed: 'left',
        dataIndex: 'id',
        render: (_, record) => (
          <Space direction="vertical">
            {record.id ? (
              <Typography.Text
                style={{ width: 180 }}
                ellipsis={{ tooltip: record.id }}
              >
                {record.id}
              </Typography.Text>
            ) : (
              <span style={{ color: '#aaa' }}>-</span>
            )}
          </Space>
        )
      },
      {
        title: 'Status',
        width: 100,
        fixed: 'left',
        dataIndex: 'status',
        render: (_, record) => (
          <Space direction="vertical">
            {record.status ? (
              <Typography.Text
                style={{ width: 100 }}
                ellipsis={{ tooltip: record.status }}
              >
                {record.status}
              </Typography.Text>
            ) : (
              <span style={{ color: '#aaa' }}>-</span>
            )}
          </Space>
        )
      },
      {
        title: 'TiDB Version',
        width: 100,
        fixed: 'left',
        dataIndex: 'tidbversion',
        render: (_, record) => (
          <Space direction="vertical">
            {record.version ? (
              <Typography.Text
                style={{ width: 100 }}
                ellipsis={{ tooltip: record.version }}
              >
                {record.version}
              </Typography.Text>
            ) : (
              <span style={{ color: '#aaa' }}>-</span>
            )}
          </Space>
        )
      },
      {
        title: 'TiDB Node Version',
        width: 100,
        fixed: 'left',
        dataIndex: 'tidbnodeversion',
        render: (_, record) => (
          (tidb_node_version = getNodeVersion(
            'tidb-nodes',
            record.component_nodes
          )),
          (
            <Space direction="vertical">
              {tidb_node_version ? (
                <Typography.Text
                  style={{ width: 100 }}
                  ellipsis={{ tooltip: tidb_node_version }}
                >
                  {tidb_node_version.major}.{tidb_node_version.minor}
                </Typography.Text>
              ) : (
                <span style={{ color: '#aaa' }}>-</span>
              )}
            </Space>
          )
        )
      },
      {
        title: 'CDC Node Version',
        width: 100,
        fixed: 'left',
        dataIndex: 'cdcnodeversion',
        render: (_, record) => (
          (cdc_node_version = getNodeVersion(
            'cdc-nodes',
            record.component_nodes
          )),
          (
            <Space direction="vertical">
              {cdc_node_version ? (
                <Typography.Text
                  style={{ width: 100 }}
                  ellipsis={{ tooltip: cdc_node_version }}
                >
                  {cdc_node_version.major}.{cdc_node_version.minor}
                </Typography.Text>
              ) : (
                <span style={{ color: '#aaa' }}>-</span>
              )}
            </Space>
          )
        )
      },
      {
        title: 'DM Node Version',
        width: 100,
        fixed: 'left',
        dataIndex: 'dmnodeversion',
        render: (_, record) => (
          (dm_node_version = getNodeVersion(
            'dm-nodes',
            record.component_nodes
          )),
          (
            <Space direction="vertical">
              {dm_node_version ? (
                <Typography.Text
                  style={{ width: 100 }}
                  ellipsis={{ tooltip: dm_node_version }}
                >
                  {dm_node_version.major}.{dm_node_version.minor}
                </Typography.Text>
              ) : (
                <span style={{ color: '#aaa' }}>-</span>
              )}
            </Space>
          )
        )
      },
      {
        title: (
          <span style={{ whiteSpace: 'nowrap' }}>O11yTiDB Node Version</span>
        ),
        width: 160,
        fixed: 'left',
        dataIndex: 'o11ytidbnodeversion',
        render: (_, record) => (
          (o11y_tidb_node_version = formatO11yNodeVersion(
            getNodeVersion(O11Y_TIDB_NODES, record.component_nodes)
          )),
          (
            <Space direction="vertical">
              {o11y_tidb_node_version !== '-' ? (
                <Typography.Text
                  style={{ width: 160 }}
                  ellipsis={{ tooltip: o11y_tidb_node_version }}
                >
                  {o11y_tidb_node_version}
                </Typography.Text>
              ) : (
                <span style={{ color: '#aaa' }}>-</span>
              )}
            </Space>
          )
        )
      },
      {
        title: 'Notes',
        width: 240,
        dataIndex: 'notes',
        render: (_, record) => {
          const notesText = Array.isArray(record.notes)
            ? record.notes
                .filter(Boolean)
                .map((n) => `- ${n}`)
                .join('\n')
            : record.notes
          return (
            <Space direction="vertical">
              {notesText ? (
                <Typography.Paragraph
                  style={{
                    width: 240,
                    marginBottom: 0,
                    whiteSpace: 'pre-wrap'
                  }}
                  ellipsis={{ rows: 2, expandable: true, symbol: 'More' }}
                  copyable={{ text: notesText }}
                >
                  {notesText}
                </Typography.Paragraph>
              ) : (
                <Typography.Text type="secondary">-</Typography.Text>
              )}
            </Space>
          )
        }
      },
      {
        title: 'Action',
        key: 'action',
        fixed: 'right',
        render: (_: any, record: K8supgradeTiDBClusterInfraInfo) => (
          <Space>
            <Link to={`/orgs/${org_id}/clusters/${record.id}`}>Detail</Link>
          </Space>
        ),
        width: 100
      }
    ]
    return cols
  }, [])

  if (k8sInfo.clusters?.length == 0) {
    return <></>
  }

  return (
    <>
      <Table<K8supgradeTiDBClusterInfraInfo>
        columns={columns}
        rowKey="id"
        dataSource={k8sInfo.clusters}
        loading={false}
        pagination={false}
        // onChange={onTableChange}
        size="small"
        scroll={{ x: 1200 }}
      />
    </>
  )
}

function getNodeVersion(kind: string, nodes: any) {
  if (nodes == null) {
    return null
  }
  for (let i in nodes) {
    if (nodes[i].kind == kind) {
      return nodes[i].version
    }
  }
  return null
}