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

import { getConnectionMethodDisplayName } from 'dbaas/features/Changefeed/connection'
import { getEndpointServiceNameLabel } from 'dbaas/features/Changefeed/helpers'
import { ConsoleapiChangefeed, ConsoleapiSinkEndpoint, DataflowNetworkType } from 'dbaas/services/dataflow/interface'

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

interface MySQLPropertiesPremiumProps {
  data: ConsoleapiChangefeed

  sinkEndpointData?: ConsoleapiSinkEndpoint
  cloudProvider: string
}

export const MySQLPropertiesPremium = ({ data, sinkEndpointData, cloudProvider }: MySQLPropertiesPremiumProps) => {
  const networkType = data.request?.network_info?.network_type

  return (
    <>
      <PropertyCard.Divider />

      <PropertyCard.Item label="Connection Method">
        {networkType ? getConnectionMethodDisplayName(networkType as DataflowNetworkType) : '-'}
      </PropertyCard.Item>

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

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

      {sinkEndpointData && (
        <>
          {sinkEndpointData.endpoint_name && (
            <PropertyCard.Item label="Private Endpoint Name">{sinkEndpointData.endpoint_name}</PropertyCard.Item>
          )}
          {sinkEndpointData.endpoint_service_name && (
            <PropertyCard.Item label={getEndpointServiceNameLabel(cloudProvider)}>
              {sinkEndpointData.endpoint_service_name}
            </PropertyCard.Item>
          )}
        </>
      )}

      <PropertyCard.Divider />

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