import React, { useMemo } from 'react'

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

import formatSql from '~/utils/sql-formatter'
import { eventTracking } from '~/utils/telemetry'

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(`SQL Repository ${title} Expand Clicked`)
          }}
          onCopyClick={() =>
            eventTracking(`SQL Repository ${title} Copy Clicked`)
          }
        >
          {formattedSQL}
        </CodeBlock>
      </Stack>
    </Card>
  )
}