import React from 'react'

import {
  Alert,
  Button,
  Group,
  Modal,
  Stack,
  Typography
} from '@tidbcloud/uikit'
import { CodeBlock } from '@tidbcloud/uikit/biz'
import { IconAlertTriangle } from '@tidbcloud/uikit/icons'

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

export const SQLBindingModal = ({
  opened,
  onClose,
  digest
}: {
  digest: string
  opened: boolean
  onClose: () => void
}) => {
  const bindingSQL = `CREATE GLOBAL BINDING FROM HISTORY USING PLAN DIGEST '${digest}';`

  return (
    <Modal
      opened={opened}
      onClose={onClose}
      title='Create SQL Binding'
      size='lg'
    >
      <Stack>
        <Typography>
          To create this SQL binding, please copy the SQL statement below and
          execute it manually in your preferred SQL client.
        </Typography>

        <CodeBlock
          language='sql'
          onCopyClick={() =>
            eventTracking('SQL Repository SQL Binding Copy Clicked')
          }
        >
          {bindingSQL}
        </CodeBlock>

        <Alert color='yellow' icon={<IconAlertTriangle />}>
          This may change the execution plan and affect SQL performance. The
          binding you create may not appear on this page immediately and can be
          delayed by up to 30 minutes.
        </Alert>

        <Group justify='flex-end'>
          <Button variant='outline' onClick={onClose}>
            Confirm
          </Button>
        </Group>
      </Stack>
    </Modal>
  )
}