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

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
        }
      ]}
    />
  )
}