import React from 'react'

import { Stack, Typography, Box, Group, Badge } from '@tidbcloud/uikit'
import { CodeBlock, LabelTooltip } from '@tidbcloud/uikit/biz'

import { eventTracking } from '~/utils/telemetry'

import TimeComponent from '../../components/TimeComponent'
import { formatValue } from '../migration_shared/format-value'
import { ApiModel } from '../migration_shared/types'
import { STATUS_MAP, TIP_MAP } from './plans-list/columns'

export const ExecutionPlan: React.FC<
  React.PropsWithChildren<{ plan: ApiModel }>
> = ({ plan }) => {
  const data = plan.binary_plan_text || plan.plan || ''
  const isBound = !!plan.plan_in_binding
  return (
    <Stack>
      <Stack>
        <Group>
          <Typography variant='body-lg' c='carbon.7'>
            {TIP_MAP.plan_digest}
          </Typography>
          <Typography style={{ wordBreak: 'break-all' }}>
            {plan.plan_digest ?? ''}
          </Typography>
          <Group gap={0}>
            <Badge
              color={STATUS_MAP[isBound ? 'bound' : 'unbound']}
              variant='dot'
              size='lg'
              sx={{ pointerEvents: 'none' }}
            >
              {isBound ? 'Binding target' : 'Not binding target'}
            </Badge>
            <LabelTooltip
              label={
                isBound
                  ? 'This plan is selected and used for SQL Binding.'
                  : 'This plan is not used to create SQL Binding.'
              }
            />
          </Group>
        </Group>
        <Group gap='xl'>
          <Box>
            <Typography variant='body-lg' c='carbon.7'>
              {TIP_MAP.avg_latency}
            </Typography>
            <Typography style={{ wordBreak: 'break-all' }}>
              {formatValue(plan, 'avg_latency', 'ns')}
            </Typography>
          </Box>
          <Box>
            <Typography variant='body-lg' c='carbon.7'>
              {TIP_MAP.avg_total_keys}
            </Typography>
            <Typography style={{ wordBreak: 'break-all' }}>
              {formatValue(plan, 'avg_total_keys', 'short')}
            </Typography>
          </Box>
          <Box>
            <Typography variant='body-lg' c='carbon.7'>
              {TIP_MAP.avg_processed_keys}
            </Typography>
            <Typography style={{ wordBreak: 'break-all' }}>
              {formatValue(plan, 'avg_processed_keys', 'short')}
            </Typography>
          </Box>
          <Box>
            <Typography variant='body-lg' c='carbon.7'>
              Last Active Time
            </Typography>
            <Typography style={{ wordBreak: 'break-all' }}>
              <TimeComponent time={plan.last_seen || 0} />
            </Typography>
          </Box>
        </Group>
      </Stack>
      <CodeBlock
        codeRender={(content) => <pre>{content}</pre>}
        foldProps={{
          persistenceKey: 'dbaas.statement.detail.execution-plan',
          iconVisible: true,
          onIconClick: () =>
            eventTracking('SQL Repository Execution Plan Expand Clicked')
        }}
        onCopyClick={() =>
          eventTracking('SQL Repository Execution Plan Copy Clicked')
        }
      >
        {data}
      </CodeBlock>
    </Stack>
  )
}