import { Alert, Box, Flex, Typography } from '@tidbcloud/uikit'
import { FormSwitch } from '@tidbcloud/uikit/biz'
import { IconAlertTriangle } from '@tidbcloud/uikit/icons'
import { useFormContext } from 'react-hook-form'

export const LogRedacted = ({
  redactedName,
  tips,
  entityName = 'cluster'
}: {
  redactedName: string
  tips?: string
  entityName?: 'cluster' | 'instance'
}) => {
  const { watch } = useFormContext()
  const redacted = watch(redactedName)

  return (
    <Flex justify="space-between" align="center" gap={32}>
      <Box>
        <Typography variant="label-lg">Log Redaction</Typography>
        <Typography variant="body-lg" mt={4}>
          {tips
            ? tips
            : `Sensitive information contained in SQL text in the ${entityName} log will be replaced by "?".`}
        </Typography>
        {!redacted && (
          <Alert color="yellow" icon={<IconAlertTriangle size={16} />} mt={8}>
            Database audit log redaction is currently disabled, resulting in log files pushed to the user's cloud
            storage service containing sensitive information. This configuration is not recommended due to potential
            security risks.
          </Alert>
        )}
      </Box>

      <FormSwitch name={redactedName} />
    </Flex>
  )
}

export default LogRedacted