import { Box, Checkbox, PrismProps } from '@tidbcloud/uikit'
import { CodeBlock } from '@tidbcloud/uikit/biz'
import React, { FC } from 'react'

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

interface ConnectionCodeProps {
  language?: string
  menuName?: string
  connection: string
  comment?: string
  fullCode?: string
  showCheckBox?: boolean
  onSelectionCopy?: () => void
  onCopy?: () => void
}

const ConnectionCode: FC<React.PropsWithChildren<ConnectionCodeProps>> = ({
  connection,
  fullCode = '',
  comment = '',
  showCheckBox = false,
  language = '',
  menuName = '',
  onSelectionCopy,
  onCopy
}) => {
  const [checked, setChecked] = React.useState(false)
  const prismCodes = showCheckBox && checked ? fullCode : connection
  const prismContent = comment
    ? `
${comment}

${prismCodes}
`
    : prismCodes

  return (
    <Box>
      {showCheckBox && (
        <Checkbox
          label="Show Example Usage"
          checked={checked}
          onChange={(event) => {
            setChecked(event.currentTarget.checked)
            eventTracking(`${menuName}-Show Example Usage Checkbox Clicked`)
          }}
          mb={16}
        />
      )}
      <CodeBlock
        language={language as PrismProps['language']}
        copyContent={prismCodes}
        codeHighlightProps={{
          onCopy: onSelectionCopy
        }}
        onCopyClick={() => {
          eventTracking(`${menuName}-Copy Button Clicked`)
          onCopy?.()
        }}
        foldProps={{
          defaultHeight: 300
        }}
        data-testid="connection-codeblock"
      >
        {prismContent}
      </CodeBlock>
    </Box>
  )
}

export default React.memo(ConnectionCode)