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'

const DetailTxn: 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: 'Start Timestamp',
          value: data.txn_start_ts,
          description: 'Transaction start timestamp, a.k.a. Transaction ID'
        },
        {
          name: 'Write Keys',
          value: getValueFormat('short')(data.write_keys || 0)
        },
        {
          name: 'Write Size',
          value: getValueFormat('bytes')(data.write_size || 0)
        },
        {
          name: 'Prewrite Regions',
          value: getValueFormat('short')(data.prewrite_region || 0)
        },
        {
          name: 'Transaction Retries',
          value: getValueFormat('short')(data.txn_retry || 0)
        }
      ]}
    />
  )
}

export default DetailTxn