import { Card, Stack, Title } from '@tidbcloud/uikit'
import { CodeBlock } from '@tidbcloud/uikit/biz'
import React, { useMemo } from 'react'

import { eventTracking } from 'dbaas/utils/tracking'

import { formatSql } from '../../components/HighlightSQL'

export const StmtSQL: React.FC<React.PropsWithChildren<{ title: string; sql: string }>> = ({ title, sql }) => {
  const formattedSQL = useMemo(() => formatSql(sql), [sql])

  return (
    <Card shadow="none" p="xl">
      <Stack gap="xs">
        <Title order={5}>{title}</Title>

        <CodeBlock
          language="sql"
          foldProps={{
            persistenceKey: `dbaas.statement.detail.${title}`,
            iconVisible: true,
            onIconClick: () => eventTracking(`Statement Detail ${title} Expand Clicked`)
          }}
          onCopyClick={() => eventTracking(`Statement Detail ${title} Copy Clicked`)}
        >
          {formattedSQL}
        </CodeBlock>
      </Stack>
    </Card>
  )
}