import React, { useMemo } from 'react'

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

import InfoTable from '../../components/InfoTable'
import { useTimeFormatter } from '../../components/TimeComponent'
import { useStatementContext } from '../utils/context'
import { StatementModel } from '../utils/type'

type ColumnType = {
  name: string
  value: React.ReactNode
  description?: string
}

export const PlanDetailTabBasic: React.FC<
  React.PropsWithChildren<{ data: StatementModel }>
> = ({ data }) => {
  const ctx = useStatementContext()
  const timeFormatter = useTimeFormatter()

  const tableData = useMemo<ColumnType[]>(() => {
    const cols = [
      {
        name: 'Table Names',
        value: data.table_names || '-',
        description: ''
      },
      {
        name: 'Index Names',
        value: data.index_names || '-',
        description: 'The name of the used index'
      },
      {
        name: 'First Seen',
        value: data.first_seen ? timeFormatter(data.first_seen) : '-',
        description: ''
      },
      {
        name: 'Last Seen',
        value: data.last_seen ? timeFormatter(data.last_seen) : '-',
        description: ''
      },
      {
        name: 'Executions Count',
        value: getValueFormat('short')(data.exec_count ?? 0, 0, 1),
        description: 'Total execution count for this kind of statement'
      },
      {
        name: 'Total Latency',
        value: getValueFormat('ns')(data.sum_latency ?? 0, 1),
        description: 'Total execution time for this kind of statement'
      },
      {
        name: 'Execution User',
        value: data.sample_user || '-',
        description: 'The user that executes the query (sampled)'
      },
      {
        name: 'Total Errors',
        value: getValueFormat('short')(data.sum_errors ?? 0, 0, 1)
      },
      {
        name: 'Total Warnings',
        value: getValueFormat('short')(data.sum_warnings ?? 0, 0, 1)
      },
      {
        name: 'Mean Memory',
        value: getValueFormat('bytes')(data.avg_mem ?? 0, 1),
        description: 'Memory usage of single query'
      },
      {
        name: 'Max Memory',
        value: getValueFormat('bytes')(data.max_mem ?? 0, 1),
        description: 'Maximum memory usage of single query'
      },
      {
        name: 'Mean Disk',
        value: getValueFormat('bytes')(data.avg_disk ?? 0, 1),
        description: 'Disk usage of single query'
      },
      {
        name: 'Max Disk',
        value: getValueFormat('bytes')(data.max_disk ?? 0, 1),
        description: 'Maximum disk usage of single query'
      }
    ]
    if (ctx.cfg.computed.isServerless || ctx.cfg.computed.isPremium) {
      cols.push({
        name: 'Total RU',
        value: getValueFormat('short')(data.sum_ru ?? 0, 2, 2)
      })
      cols.push({
        name: 'Mean RU',
        value: getValueFormat('short')(data.avg_ru ?? 0, 2, 2)
      })
    }
    return cols
  }, [data, ctx.cfg.computed])

  return (
    <InfoTable<ColumnType>
      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={tableData}
    />
  )
}