import { getValueFormat } from '@baurine/grafana-value-formats'
import { Text, Tooltip } from '@tidbcloud/uikit'

import { SlowquerySlowLogRespItem } from 'dbaas/services/ngm/interface'

import InfoTable from '../../components/InfoTable'

type SlowQueryDetailCopData = SlowquerySlowLogRespItem & {
  ia_remote_read_segment_size?: number
}

const DetailCop: React.FC<React.PropsWithChildren<{ data: SlowQueryDetailCopData; isEssential: boolean }>> = ({
  data,
  isEssential
}) => {
  const shouldShowIaRemoteReadSegmentSize = isEssential && data.ia_remote_read_segment_size != null

  return (
    <InfoTable<{
      name: string
      value: React.ReactNode
      description?: string
    }>
      columns={[
        {
          key: 'name',
          name: 'Name',
          element: ({ value }) => <Text className="wd-truncate">{value}</Text>
        },
        {
          key: 'value',
          name: 'Value',
          element: ({ value }) => (
            <Tooltip label={value} position="top-start" withArrow>
              <Text className="wd-truncate">{value}</Text>
            </Tooltip>
          ),
          tdStyle: { maxWidth: '300px' }
        },
        {
          key: 'description',
          name: 'Description',
          tdStyle: { maxWidth: '400px' },
          element: ({ value }) => (
            <Tooltip label={value} position="top-start" withArrow maw={300} multiline>
              <Text className="wd-truncate">{value}</Text>
            </Tooltip>
          )
        }
      ]}
      data={[
        {
          name: 'Request Count',
          value: getValueFormat('short')(data.request_count || 0, 1)
        },
        {
          name: 'Process Keys',
          value: getValueFormat('short')(data.process_keys || 0, 1)
        },
        {
          name: 'Total Keys',
          value: getValueFormat('short')(data.total_keys || 0, 1)
        },
        {
          name: 'Copr Address (Process)',
          value: data.cop_proc_addr || '-',
          description: 'The address of the TiKV that takes most time process the Coprocessor request'
        },
        {
          name: 'Copr Address (Wait)',
          value: data.cop_wait_addr || '-',
          description: 'The address of the TiKV that takes most time wait the Coprocessor request'
        },
        {
          name: 'RocksDB Block Cache Hits',
          value: getValueFormat('short')(data.rocksdb_block_cache_hit_count || 0, 1),
          description: 'Total number of hits from the block cache (RocksDB block_cache_hit_count)'
        },
        {
          name: 'RocksDB Read Size',
          value: getValueFormat('bytes')(data.rocksdb_block_read_byte || 0, 1),
          description: 'Total number of bytes RocksDB read from file (RocksDB block_read_byte)'
        },
        {
          name: 'RocksDB Block Reads',
          value: getValueFormat('short')(data.rocksdb_block_read_count || 0, 1),
          description: 'Total number of blocks RocksDB read from file (RocksDB block_read_count)'
        },
        {
          name: 'RocksDB Skipped Deletions',
          value: getValueFormat('short')(data.rocksdb_delete_skipped_count || 0, 1),
          description:
            'Total number of deleted (a.k.a. tombstone) key versions that are skipped during iteration (RocksDB delete_skipped_count)'
        },
        {
          name: 'RocksDB Skipped Keys',
          value: getValueFormat('short')(data.rocksdb_key_skipped_count || 0, 1),
          description: 'Total number of keys skipped during iteration (RocksDB key_skipped_count)'
        },
        ...(shouldShowIaRemoteReadSegmentSize
          ? [
              {
                name: 'IA Remote Read Segment Size',
                value: getValueFormat('bytes')(data.ia_remote_read_segment_size || 0, 1),
                description: 'Total number of bytes read from IA remote segments'
              }
            ]
          : [])
      ]}
    />
  )
}

export default DetailCop