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

import { useTimeFormatter } from 'dbaas/components/TimeComponent'
import { useSharedTiDBContext } from 'dbaas/screens/NextGen/tidb-mgmt-container/shared/tidb-context'
import { SlowquerySlowLogRespItem } from 'dbaas/services/ngm/interface'

import InfoTable from '../../shared/diagnosis/InfoTable'

const DetailBasic: React.FC<React.PropsWithChildren<{ data: SlowquerySlowLogRespItem }>> = ({ data }) => {
  const timeFormatter = useTimeFormatter()
  const tidb = useSharedTiDBContext()
  const isPremiumReserved = tidb.computed.isPremiumReserved
  return (
    <InfoTable<{
      name: string
      value: React.ReactNode
      description?: string
    }>
      columns={[
        {
          key: 'name',
          name: 'Name',
          element: ({ value }) => <Text className="wd-truncate">{value}</Text>
        },
        {
          key: 'value',
          name: 'Value',
          element: ({ value }) => (
            <Tooltip label={value} position="top-start" withArrow>
              <Text className="wd-truncate">{value}</Text>
            </Tooltip>
          ),
          tdStyle: { maxWidth: '300px' }
        },
        {
          key: 'description',
          name: 'Description',
          tdStyle: { maxWidth: '400px' },
          element: ({ value }) => (
            <Tooltip label={value} position="top-start" withArrow maw={300} multiline>
              <Text className="wd-truncate">{value}</Text>
            </Tooltip>
          )
        }
      ]}
      data={[
        {
          name: 'Finish Time',
          value: timeFormatter(data.timestamp!),
          description: 'The time this query finished execution'
        },
        {
          name: 'Query Template ID',
          value: data.digest,
          description: 'a.k.a. Query digest'
        },
        {
          name: 'Is Internal?',
          value: data.is_internal === 1 ? 'Yes' : 'No',
          description: 'Whether this is an internal query'
        },
        {
          name: 'Is Success?',
          value: data.success === 1 ? 'Yes' : 'No',
          description: 'Whether query is executed successfully'
        },
        {
          name: 'Is Prepared?',
          value: data.prepared === 1 ? 'Yes' : 'No',
          description: 'Is Generated by the prepare statement'
        },
        {
          name: 'Is Plan from Cache?',
          value: data.plan_from_cache === 1 ? 'Yes' : 'No'
        },
        {
          name: 'Is Plan from Binding?',
          value: data.plan_from_binding === 1 ? 'Yes' : 'No'
        },
        {
          name: 'Execution Database',
          value: data.db || '-',
          description: 'The database used to execute the query'
        },
        {
          name: 'Index Names',
          value: data.index_names || '-',
          description: 'The name of the used index'
        },
        {
          name: 'Used Statistics',
          value: data.stats || '-'
        },
        {
          name: 'Backoff Types',
          value: data.backoff_types || '-'
        },
        ...(!isPremiumReserved
          ? [
              {
                name: 'RU',
                value: getValueFormat('short')(data.ru || 0, 2, 2),
                description: 'Request unit'
              }
            ]
          : []),
        {
          name: 'Connection ID',
          value: data.connection_id || '-',
          description: 'Unique connection ID of the query'
        },
        {
          name: 'Execution User',
          value: data.user || '-',
          description: 'The user that executes the query'
        },
        {
          name: 'Client Address',
          value: data.host || '-',
          description: 'The address of the client that sends the query'
        }
      ]}
    />
  )
}

export default DetailBasic