import { Space, Table, Tag, Typography } from 'antd'
import { ColumnsType } from 'antd/es/table/interface'
import React from 'react'
import { Link } from 'react-router-dom'

import {
  TenantTenantRegion,
  EntityTopTenant
} from 'apiClient/services/devops/interface'

interface TopTenantTableProps {
  tenants: EntityTopTenant[]
  renderValue?: (_: any, record: EntityTopTenant) => React.ReactNode
  renderAction?: (_: any, record: EntityTopTenant) => React.ReactNode
}

export const TopTenantTable = ({
  tenants,
  renderValue,
  renderAction
}: TopTenantTableProps) => {
  const columns: ColumnsType<EntityTopTenant> = [
    {
      title: 'Tenant',
      dataIndex: 'id',
      render: (_, record) => (
        <Space direction="vertical">
          {record.name ? (
            <Typography.Text
              // style={{width: 160}}
              ellipsis={{ tooltip: record.name }}
            >
              {record.name}
            </Typography.Text>
          ) : (
            <span style={{ color: '#aaa' }}>-</span>
          )}
          <Typography.Text type="secondary">{record.id}</Typography.Text>
        </Space>
      )
    },
    {
      title: 'Alias',
      dataIndex: 'alias',
      render(_: any, record: EntityTopTenant) {
        return record.alias || record.name
      }
    },
    {
      title: 'Region',
      dataIndex: 'region',
      render: (_: any, record: EntityTopTenant) => {
        let color = 'geekblue'
        switch (record.region) {
          case TenantTenantRegion.EMEA:
            color = 'green'
            break
          case TenantTenantRegion.APAC:
            color = 'gold'
            break
          case TenantTenantRegion.NA:
            color = 'cyan'
            break
          case TenantTenantRegion.JAPAN:
            color = 'magenta'
            break
        }
        return record.region ? (
          <Tag color={color} key={record.region}>
            {record.region || ''}
          </Tag>
        ) : (
          ''
        )
      }
    },
    {
      title: 'Value',
      dataIndex: 'value',
      render: renderValue || ((_: any, record: EntityTopTenant) => record.value)
    },
    {
      title: 'Action',
      key: 'action',
      render:
        renderAction ||
        ((_, record) =>
          record.name ? (
            <Link to={`/orgs/${record.id}?name=${record.name}`} target="_blank">
              Detail
            </Link>
          ) : (
            '-'
          ))
    }
  ]
  return (
    <>
      <Table
        columns={columns}
        dataSource={tenants}
        pagination={{ pageSize: 5 }}
        size={'small'}
      />
    </>
  )
}