import { Button, Flex, Modal, Typography } from '@tidbcloud/uikit'
import { observer } from 'mobx-react'

import { Commonv1beta1ServicePlan } from 'dbaas/services/api-clients/v2025/tidb-management/v1beta2/interface'

interface AuditLogDisableModalProps {
  opened: boolean
  loading?: boolean
  plan?: Commonv1beta1ServicePlan
  onClose: () => void
  disableHandler: () => void
}

export const AuditLogDisableModal = observer(
  ({ opened, loading, plan, onClose, disableHandler }: AuditLogDisableModalProps) => {
    return (
      <Modal
        opened={opened}
        centered
        title="Disable Database Audit Logging"
        size={480}
        trapFocus={false}
        onClose={onClose}
      >
        <Typography mb={32} variant="body-lg">
          When disabled, the database 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={loading}
            data-mp-event="Disable DB Audit Logging Confirm Button Clicked"
            data-mp-plan={plan}
            onClick={disableHandler}
          >
            Disable
          </Button>
        </Flex>
      </Modal>
    )
  }
)

export default AuditLogDisableModal