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

import { useListTenantQuota } from '../../../../apiClient/services/devops'
import { TenantTenantQuota } from '../../../../apiClient/services/devops/interface'

export const TenantQuotas = () => {
  const { org_id } = useParams<{ org_id: string }>()
  const { data, refetch } = useListTenantQuota(org_id)
  const columns = useMemo(() => {
    const cols: ColumnsType<TenantTenantQuota> = [
      {
        title: 'Component',
        width: 200,
        dataIndex: 'component',
        render: (_, record) => (
          <Space direction="vertical">
            {record.component ? (
              <Typography.Text
                style={{ width: 200 }}
                ellipsis={{ tooltip: record.component }}
              >
                {record.component}
              </Typography.Text>
            ) : (
              <span style={{ color: '#aaa' }}>-</span>
            )}
          </Space>
        )
      },
      {
        title: 'Quota',
        width: 200,
        dataIndex: 'quota',
        render: (_, record) => (
          <Space direction="vertical">
            {record.quota ? (
              <Typography.Text
                style={{ width: 200 }}
                ellipsis={{ tooltip: record.quota }}
              >
                {record.quota}
              </Typography.Text>
            ) : (
              <span style={{ color: '#aaa' }}>-</span>
            )}
          </Space>
        )
      }
    ]
    return cols
  }, [])

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

  if (data.data.tenant_quotas?.length === 0) {
    return <></>
  }

  return (
    <>
      <Card title="Quotas">
        <Table<TenantTenantQuota>
          columns={columns}
          rowKey="id"
          dataSource={data.data.tenant_quotas}
          loading={false}
          size="small"
          scroll={{ x: 1200 }}
        />
      </Card>
    </>
  )
}