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

import {
  useDatabaseAuditLogServiceUpdateAuditLogSetting,
  getDatabaseAuditLogServiceGetAuditLogSettingQueryKey
} from 'dbaas/services/api-clients/v2025/tidb-management/v1beta2'
import { getErrorMessage } from 'dbaas/services/errorCodes'
import useStores from 'dbaas/stores/useStores'

interface AuditLogDisableModalProps {
  opened: boolean
  tidbId: string
  onClose: () => void
}

export const AuditlogDisabledModal = observer(({ opened, tidbId, onClose }: AuditLogDisableModalProps) => {
  const {
    store: { lastVisitLocation }
  } = useStores()

  const { mutateAsync: updateAuditLogSetting, isLoading: isUpdating } =
    useDatabaseAuditLogServiceUpdateAuditLogSetting()
  const queryClient = useQueryClient()

  const disableHandler = async () => {
    try {
      await updateAuditLogSetting({
        tidbId,
        data: {
          enabled: false
        },
        params: {
          orgId: lastVisitLocation.orgId,
          projectId: lastVisitLocation.projectId
        }
      })
    } catch (e) {
      notifier.error(getErrorMessage(e, true))
    }
    queryClient.fetchQuery(
      getDatabaseAuditLogServiceGetAuditLogSettingQueryKey(tidbId, {
        orgId: lastVisitLocation.orgId,
        projectId: lastVisitLocation.projectId
      })
    )
    onClose()
  }

  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={isUpdating}
          data-mp-event="Disable DB Audit Logging Confirm Button Clicked"
          data-mp-plan="Premium"
          onClick={disableHandler}
        >
          Disable
        </Button>
      </Flex>
    </Modal>
  )
})