import React from 'react'
import { useMemo } from 'react'

import { Box, HoverCard, HoverCardProps, Typography } from '@tidbcloud/uikit'

import HighlightSQL from './HighlightSQL'

export function SQLWithPopover({
  sql,
  position
}: {
  sql: string
  position?: HoverCardProps['position']
}) {
  const truncSQLShort = useMemo(() => {
    return sql.length <= 200 ? sql : sql.slice(0, 200) + '...'
  }, [sql])
  const truncSQLLong = useMemo(() => {
    return sql.length <= 1000 ? sql : sql.slice(0, 1000) + '...'
  }, [sql])

  return (
    <Box w='100%'>
      <HoverCard
        withinPortal
        withArrow
        position={position || 'right'}
        shadow='md'
      >
        <HoverCard.Target>
          <Box>
            <HighlightSQL sql={truncSQLShort} compact />
          </Box>
        </HoverCard.Target>
        <HoverCard.Dropdown
          onClick={(e) => e.stopPropagation()}
          maw={700}
          mah='90vh'
          sx={{ overflow: 'auto' }}
        >
          <HighlightSQL sql={truncSQLLong} />
        </HoverCard.Dropdown>
      </HoverCard>
    </Box>
  )
}

// the evicted record's digest is empty string
export function EvictedSQL() {
  return (
    <HoverCard withinPortal withArrow position='right' shadow='md'>
      <HoverCard.Target>
        <Typography c='dimmed' fs='italic'>
          Others
        </Typography>
      </HoverCard.Target>
      <HoverCard.Dropdown onClick={(e) => e.stopPropagation()}>
        <Typography>All of other dropped SQL statements</Typography>
      </HoverCard.Dropdown>
    </HoverCard>
  )
}