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

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

import InfoTable from '../../shared/diagnosis/InfoTable'

const DetailCop: React.FC<React.PropsWithChildren<{ data: SlowquerySlowLogRespItem }>> = ({ data }) => {
  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)'
        }
      ]}
    />
  )
}

export default DetailCop