import { Stack, Typography } from '@tidbcloud/uikit'
import { PropertyCard } from '@tidbcloud/uikit/biz'

import { Changefeed, MySQLNetworkTypeEnum } from 'dbaas/services/api-clients/legacy/serverless/interface'

interface MySQLPropertiesEssentialProps {
  data: Changefeed
  cloudProvider: string
}

const NetworkTypeMap: Record<MySQLNetworkTypeEnum, string> = {
  [MySQLNetworkTypeEnum.PUBLIC]: 'Public',
  [MySQLNetworkTypeEnum.PRIVATE_LINK]: 'Private Link'
}

export const MySQLPropertiesEssential = ({ data }: MySQLPropertiesEssentialProps) => {
  const mysql = data.sink?.mysql
  const networkType = mysql?.network?.network_type

  return (
    <>
      <PropertyCard.Divider />

      <PropertyCard.Item label="Connection Method">{networkType ? NetworkTypeMap[networkType] : '-'}</PropertyCard.Item>

      <PropertyCard.Item label="MySQL Endpoint">{mysql?.network?.public_endpoint || '-'}</PropertyCard.Item>

      <PropertyCard.Item label="MySQL Username">{mysql?.authentication?.user_name || '-'}</PropertyCard.Item>

      <PropertyCard.Item label="TLS Encryption">
        {mysql?.authentication?.enable_tls ? 'Enabled' : 'Disabled'}
      </PropertyCard.Item>

      {networkType === MySQLNetworkTypeEnum.PRIVATE_LINK && mysql?.network?.private_link && (
        <>
          <PropertyCard.Item label="Private Link Connection ID">
            {mysql.network.private_link.private_link_connection_id || '-'}
          </PropertyCard.Item>
          <PropertyCard.Item label="Port">{mysql.network.private_link.port || '-'}</PropertyCard.Item>
        </>
      )}

      <PropertyCard.Divider />

      {/* Table Filter */}
      <PropertyCard.Item label="Table Filter">
        {data.filter?.filter_rule?.length ? (
          <Stack gap={4}>
            {data.filter.filter_rule.map((rule, idx) => (
              <Typography key={idx} variant="body-lg">
                {rule}
              </Typography>
            ))}
          </Stack>
        ) : (
          '-'
        )}
      </PropertyCard.Item>

      {/* Start Position */}
      <PropertyCard.Item label="Start Position">{data.start_position?.mode || '-'}</PropertyCard.Item>
    </>
  )
}