import { Button, Flex, Modal, notifier, Typography } from '@tidbcloud/uikit'

import { useUpdateRegionOpsAuditLogSettings } from 'apiClient/services/devops'
import { TenantRegion } from 'apiClient/services/devops/interface'
import { getErrorMessage } from 'utils/error'

interface AuditLogDisableModalProps {
  opened: boolean
  onClose: () => void
  tenantId: string
  config?: TenantRegion
}

export const AuditlogDisabledModal = ({
  opened,
  tenantId,
  config,
  onClose
}: AuditLogDisableModalProps) => {
  const { mutateAsync: updateSettings, isLoading } =
    useUpdateRegionOpsAuditLogSettings()
  const disableHandler = async () => {
    try {
      await updateSettings({
        tenantId,
        data: {
          ...config?.ops_audit_log_setting,
          region_logical_name: config?.logical_name ?? '',
          reason: 'Disable OPS Audit Logging',
          enabled: false
        }
      })
    } catch (e) {
      notifier.error(getErrorMessage(e))
    }
    onClose()
  }

  return (
    <Modal
      opened={opened}
      centered
      title="Disable OPS Audit Logging"
      size={480}
      trapFocus={false}
      onClose={onClose}
    >
      <Typography mb={32} variant="body-lg">
        When disabled, the OPS audit log will no longer generate audit log
        files.
      </Typography>

      <Flex justify="flex-end" gap={16}>
        <Button
          variant="outline"
          data-mp-event="Disable DB Audit Logging Cancel Button Clicked"
          onClick={onClose}
        >
          Cancel
        </Button>
        <Button
          variant="outline"
          color="red"
          loading={isLoading}
          data-mp-event="Disable DB Audit Logging Confirm Button Clicked"
          onClick={disableHandler}
        >
          Disable
        </Button>
      </Flex>
    </Modal>
  )
}