import { PropertyCard } from '@tidbcloud/uikit/biz'

import { DataflowConnector } from 'dbaas/services/dataflow/interface'

import { StartPositionProperty } from './StartPositionDisplay'
import { TableConfigProperties } from './TableFilterProperties'

interface ServerlessTiDBPropertiesProps {
  data: DataflowConnector
}

export const ServerlessTiDBProperties = ({ data }: ServerlessTiDBPropertiesProps) => {
  return (
    <>
      <PropertyCard.Divider />

      <PropertyCard.Item label="TiDB Cloud Endpoint">
        {data.request?.serverless_tidb_info?.mysql_info?.connection?.endpoint || '-'}
      </PropertyCard.Item>

      {data.request?.network_info?.private_link_service_name && (
        <PropertyCard.Item label="Private Endpoint Service">
          {data.request.network_info.private_link_service_name}
        </PropertyCard.Item>
      )}

      <PropertyCard.Item label="Username">
        {data.request?.serverless_tidb_info?.mysql_info?.connection?.username || '-'}
      </PropertyCard.Item>

      <PropertyCard.Divider />

      <TableConfigProperties data={data.request?.serverless_tidb_info?.mysql_info?.table_config} />
      <StartPositionProperty data={data.request?.serverless_tidb_info?.mysql_info?.start_position} />
    </>
  )
}