import { Button, Code, Stack, Typography } from '@tidbcloud/uikit'
import { CodeBlock } from '@tidbcloud/uikit/biz'

import VSCodeLogoLight from 'media/ai/vscode-light.svg?react'

import { mcpConfig } from '../meta/output'

import { getMcpConfigCodes } from './get-mcp-config-codes'
import { type McpGuideProps } from './guide-types'

export const VSCodeGuide = ({
  host,
  port,
  username,
  password,
  database,
  oneClickProps,
  onSelectionCopy,
  onCopyBtnClick
}: McpGuideProps) => {
  const isFieldsValid = !!(host && port && username && password && database)
  const isOneClickInstallDisabled = oneClickProps?.disabled || !isFieldsValid
  const installLink = mcpConfig.vscode.installMethod.deeplink.getInstallLink({
    host,
    port,
    username,
    password,
    database
  })
  const jsonCodes = getMcpConfigCodes(mcpConfig.vscode.installMethod.json.codeTemplate, {
    host,
    port,
    username,
    password,
    database
  })

  return (
    <Stack gap="md">
      <Typography variant="body-lg">Install in one click:</Typography>
      {isOneClickInstallDisabled ? (
        <Button
          size="sm"
          leftSection={<VSCodeLogoLight />}
          disabled
          sx={{ alignSelf: 'flex-start' }}
          {...oneClickProps}
        >
          Add to VS Code
        </Button>
      ) : (
        <Button
          size="sm"
          component="a"
          href={installLink}
          leftSection={<VSCodeLogoLight />}
          sx={{ alignSelf: 'flex-start' }}
          {...oneClickProps}
        >
          Add to VS Code
        </Button>
      )}
      <Typography variant="body-lg">
        Or add the configuration to <Code>{mcpConfig.vscode.installMethod.json.configLocation.fileName}</Code>:
      </Typography>
      <CodeBlock
        language="json"
        codeHighlightProps={{
          onCopy: onSelectionCopy
        }}
        onCopyClick={onCopyBtnClick}
      >
        {jsonCodes}
      </CodeBlock>
    </Stack>
  )
}