import { Alert, Modal, Stack } from '@tidbcloud/uikit'
import { CodeBlock } from '@tidbcloud/uikit/biz'

import { getEnableAwsPrivateEndpointCommands } from '../shared/private-endpoint-aws/helpers'

interface PremiumEnableAwsDnsGuideModalProps {
  endpointId: string
  regionId: string
  opened: boolean
  onClose: () => void
}

export const PremiumEnableAwsDnsGuideModal = ({
  endpointId,
  regionId,
  opened,
  onClose
}: PremiumEnableAwsDnsGuideModalProps) => {
  const commands = getEnableAwsPrivateEndpointCommands({
    endpointId,
    region: regionId?.replace(/^aws-/, '') ?? '<YourRegion>'
  })

  return (
    <Modal size={720} centered title="Enable DNS" opened={opened} onClose={onClose}>
      <Stack gap="xl">
        <CodeBlock language="bash">{commands}</CodeBlock>
        <Alert color="sky">
          In order to finalize your private endpoint connection, you need to copy the command and execute it in aws-cli
          to enable <b>private DNS</b>.
        </Alert>
      </Stack>
    </Modal>
  )
}