import { Alert, Box, Flex, Stack } from '@tidbcloud/uikit'
import { IconAlertTriangle } from '@tidbcloud/uikit/icons'

import { CodeWithAction } from '../components/CodeWithAction'
import { PropertyItem } from '../components/PropertyItem'
import { APIKeyItem } from '../shared/helpers'
import { mpEvents } from '../tracker'

interface ResultProps {
  data?: APIKeyItem
}

const Result: React.FC<React.PropsWithChildren<ResultProps>> = ({ data }) => {
  if (!data) {
    return <Box component="p">Something wrong, please try again later.</Box>
  }

  return (
    <Stack>
      <Flex
        p={16}
        gap={16}
        direction="column"
        sx={(theme) => ({
          backgroundColor: theme.colors.carbon[2],
          borderRadius: theme.defaultRadius,
          border: `1px solid ${theme.colors.carbon[4]}`
        })}
      >
        <PropertyItem label="Public Key" align="center">
          <CodeWithAction copyIconProps={{ 'data-mp-event': mpEvents.copyPublicKey }}>
            {data.public_key || ''}
          </CodeWithAction>
        </PropertyItem>
        <PropertyItem label="Private Key" align="center">
          <CodeWithAction copyIconProps={{ 'data-mp-event': mpEvents.copyPrivateKey }}>
            {data.private_key || ''}
          </CodeWithAction>
        </PropertyItem>
      </Flex>
      <Alert icon={<IconAlertTriangle size={14} color="inherit" />} color="yellow" mt={8}>
        Copy your private key and store it in a secure location. After you leave this dialog, the full private key is{' '}
        <b>invisible</b> in TiDB Cloud.
      </Alert>
    </Stack>
  )
}

export default Result