import React, { useMemo } from 'react'

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

import InfoTable from '../../components/InfoTable'
import { useTimeFormatter } from '../../components/TimeComponent'
import { StatementV2Model } from '../types'

interface PlanDetailTabBasicProps {
  data: StatementV2Model
  showRU: boolean
}

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

export const PlanDetailTabBasic: React.FC<PlanDetailTabBasicProps> = ({
  data,
  showRU
}) => {
  const timeFormatter = useTimeFormatter()
  const tableData = useMemo<DetailRow[]>(() => {
    const rows: DetailRow[] = [
      {
        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 || data.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)
      }
    ]

    if (showRU) {
      rows.push(
        {
          name: 'Total RU',
          value: getValueFormat('short')(data.sum_ru ?? 0, 2, 2)
        },
        {
          name: 'Mean RU',
          value: getValueFormat('short')(data.avg_ru ?? 0, 2, 2)
        }
      )
    } else {
      rows.push(
        {
          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'
        }
      )
    }

    return rows
  }, [data, showRU, timeFormatter])

  return (
    <InfoTable<DetailRow>
      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}
    />
  )
}