import React from 'react'

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

import InfoTable from '../../components/InfoTable'
import { StatementModel } from '../utils/type'

export const PlanDetailTabTxn: React.FC<
  React.PropsWithChildren<{ data: StatementModel }>
> = ({ data }) => {
  return (
    <InfoTable<{
      name: string
      value: React.ReactNode
      description?: string
    }>
      columns={[
        {
          key: 'name',
          name: 'Name',
          element: ({ value }) => (
            <Typography className='wd-truncate'>{value}</Typography>
          )
        },
        {
          key: 'value',
          name: 'Value',
          element: ({ value }) => (
            <Tooltip label={value} position='top-start' withArrow>
              <Typography className='wd-truncate'>{value}</Typography>
            </Tooltip>
          ),
          tdStyle: { maxWidth: '300px' }
        },
        {
          key: 'description',
          name: 'Description',
          tdStyle: { maxWidth: '400px' },
          element: ({ value }) => (
            <Tooltip
              label={value}
              position='top-start'
              withArrow
              maw={300}
              multiline
            >
              <Typography className='wd-truncate'>{value}</Typography>
            </Tooltip>
          )
        }
      ]}
      data={[
        {
          name: 'Mean Affected Rows',
          value: getValueFormat('short')(data.avg_affected_rows ?? 0, 0, 1)
        },
        {
          name: 'Total Backoff Count',
          value: getValueFormat('short')(data.sum_backoff_times ?? 0, 0, 1)
        },
        {
          name: 'Mean Written Keys',
          value: getValueFormat('short')(data.avg_write_keys ?? 0, 0, 1)
        },
        {
          name: 'Max Written Keys',
          value: getValueFormat('short')(data.max_write_keys ?? 0, 0, 1)
        },
        {
          name: 'Mean Written Data Size',
          value: getValueFormat('bytes')(data.avg_write_size ?? 0, 1)
        },
        {
          name: 'Max Written Data Size',
          value: getValueFormat('bytes')(data.max_write_size ?? 0, 1)
        },
        {
          name: 'Mean Prewrite Regions',
          value: getValueFormat('short')(data.avg_prewrite_regions ?? 0, 0, 1)
        },
        {
          name: 'Max Prewrite Regions',
          value: getValueFormat('short')(data.max_prewrite_regions ?? 0, 0, 1)
        },
        {
          name: 'Mean Transaction Retries',
          value: getValueFormat('short')(data.avg_txn_retry ?? 0, 0, 1)
        },
        {
          name: 'Max Transaction Retries',
          value: getValueFormat('short')(data.max_txn_retry ?? 0, 0, 1)
        }
      ]}
    />
  )
}