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 PlanDetailTabTime: React.FC<
  React.PropsWithChildren<{ data: StatementModel }>
> = ({ data }) => {
  return (
    <InfoTable<{
      name: React.ReactNode
      time: number
      level: number
      description?: string
    }>
      columns={[
        {
          key: 'name',
          name: 'Name',
          element: ({ data, value, rowIndex }) => {
            const d = data[rowIndex]
            return <Typography pl={d.level * 24}>{value}</Typography>
          }
        },
        {
          key: 'time',
          name: 'Time',
          tdStyle: { maxWidth: '200px' },
          element: ({ value }) => {
            return (
              <Typography w='80px'>{getValueFormat('ns')(value, 1)}</Typography>
            )
          }
        },
        {
          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: <Typography fw='bold'>Query Time</Typography>,
          time: data.avg_latency ?? 0,
          level: 0,
          description:
            'The execution time of a query (due to the parallel execution, it may be significantly smaller than the sum of below time)'
        },
        {
          name: 'Parse Time',
          time: data.avg_parse_latency ?? 0,
          level: 1,
          description: 'Time consumed when parsing the query'
        },
        {
          name: 'Compile',
          time: data.avg_compile_latency ?? 0,
          level: 1,
          description: 'Time consumed when optimizing the query'
        },
        {
          name: 'Coprocessor Wait Time',
          time: data.avg_wait_time ?? 0,
          level: 1
        },
        {
          name: 'Coprocessor Execution Time',
          time: data.avg_process_time ?? 0,
          level: 1
        },
        {
          name: 'Backoff Retry Time',
          time: data.avg_backoff_time ?? 0,
          level: 1,
          description:
            'The waiting time before retry when a query encounters errors that require a retry'
        },
        {
          name: 'Get Commit Ts Time',
          time: data.avg_get_commit_ts_time ?? 0,
          level: 1
        },
        {
          name: 'Local Latch Wait Time',
          time: data.avg_local_latch_wait_time ?? 0,
          level: 1
        },
        {
          name: 'Resolve Lock Time',
          time: data.avg_resolve_lock_time ?? 0,
          level: 1
        },
        {
          name: 'Prewrite Time',
          time: data.avg_prewrite_time ?? 0,
          level: 1
        },
        {
          name: 'Commit Time',
          time: data.avg_commit_time ?? 0,
          level: 1
        },
        {
          name: 'Commit Backoff Retry Time',
          time: data.avg_commit_backoff_time ?? 0,
          level: 1
        }
      ]}
    />
  )
}