import React, { useMemo } from 'react'
import { Tooltip } from 'antd'
import { getValueFormat } from '@baurine/grafana-value-formats'

import { CentralTopSQLDigestCPUTimeRecord } from 'apiClient'
import { Card, CardTable, Bar, TextWrap } from 'components'
import { OTHERS_LABEL } from './useOthers'

interface TopSqlTableProps {
  topN: string
  data: CentralTopSQLDigestCPUTimeRecord[]
  timeRange: [number, number]
}

interface TableData {
  query: string
  digest: string
  cpuTime: number
}

export function TopSqlTable({ topN, data, timeRange }: TopSqlTableProps) {
  const { data: tableData, totalCpuTime } = useTableData(data, timeRange)
  const tableColumns = useMemo(
    () => [
      {
        name: 'Query Template ID',
        key: 'digest',
        minWidth: 150,
        maxWidth: 250,
        onRender: (rec) =>
          rec.digest === OTHERS_LABEL ? (
            <i style={{ color: '#888' }}>{rec.digest}</i>
          ) : (
            <Tooltip title={rec.digest}>
              <TextWrap>{rec.digest}</TextWrap>
            </Tooltip>
          )
      },
      {
        name: 'Query',
        key: 'query',
        minWidth: 150,
        maxWidth: 250,
        onRender: (rec) => {
          const text = rec.query
            ? rec.query === OTHERS_LABEL
              ? ''
              : rec.query
            : 'Unknown'
          return (
            <Tooltip
              title={text}
              overlayStyle={{ maxHeight: 500, overflow: 'scroll' }}
            >
              <TextWrap>{text}</TextWrap>
            </Tooltip>
          )
        }
      },
      {
        name: 'CPU',
        key: 'cpuTime',
        minWidth: 150,
        maxWidth: 250,
        onRender: (rec) => (
          <Bar textWidth={70} value={rec.cpuTime!} capacity={totalCpuTime}>
            {getValueFormat('ms')(rec.cpuTime, 0, 0)}
          </Bar>
        )
      }
    ],
    [totalCpuTime]
  )
  return (
    <Card title={`Top ${topN} Queries`}>
      <CardTable
        cardNoMarginTop
        items={tableData || []}
        columns={tableColumns}
      />
    </Card>
  )
}

function useTableData(
  records: CentralTopSQLDigestCPUTimeRecord[],
  timeRange: [number, number]
) {
  const tableData: { data: TableData[]; totalCpuTime: number } = useMemo(() => {
    if (!records) {
      return { data: [], totalCpuTime: 0 }
    }
    let totalCpuTime = 0
    const d = records
      .map((r) => {
        let cpuTime = 0
        r.data?.forEach((d) => {
          if (
            timeRange &&
            (parseInt(d.timestamp) < timeRange[0] ||
              parseInt(d.timestamp) > timeRange[1])
          ) {
            return
          }
          cpuTime += d.cpu_time_ms
        })
        totalCpuTime += cpuTime
        return { cpuTime, query: r.sql_text, digest: r.sql_digest }
      })
      .filter((r) => !!r.cpuTime)
      .sort((a, b) => b.cpuTime - a.cpuTime)
      .sort((a, b) => (b.digest === OTHERS_LABEL ? -1 : 0))
    return { data: d, totalCpuTime }
  }, [records, timeRange])

  return tableData
}