import { Modal, Button, Typography, Group, Stack, notifier, Code } from '@tidbcloud/uikit'
import { observer } from 'mobx-react'

import { useDeleteCidr } from 'dbaas/services/api-clients/legacy/central'
import { CentralCidr, CentralCidrState } from 'dbaas/services/api-clients/legacy/central/interface'
import { getErrorMessage } from 'dbaas/services/errorCodes'
import useStores from 'dbaas/stores/useStores'

import { ProviderLabel } from './helpers'

interface DeletionModalProps {
  opened: boolean
  cidrData?: CentralCidr
  onClose: () => void
  onConfirm?: () => void
}

export const DeletionModal = observer(({ opened, cidrData, onClose, onConfirm }: DeletionModalProps) => {
  const {
    store: {
      lastVisitLocation: { orgId, projectId }
    }
  } = useStores()

  const cidrDeletion = useDeleteCidr({
    mutation: {
      onError: (err) => {
        notifier.error(getErrorMessage(err, true))
      }
    }
  })
  const disabled = !cidrData || cidrData.state === CentralCidrState.STATE_ACTIVE
  const onDelete = async () => {
    if (disabled) {
      return
    }

    await cidrDeletion.mutateAsync({
      orgId,
      projectId,
      cidrId: cidrData.id!
    })

    onConfirm?.()
    onClose()
  }
  const provider = cidrData?.provider?.toLowerCase()
  const providerLabel: string = provider ? ProviderLabel[provider] : ''

  return (
    <>
      <Modal centered size="lg" opened={opened} title={`Delete ${providerLabel} CIDR`} onClose={onClose}>
        <Stack>
          <Typography variant="body-lg">
            Are you sure you want to delete the CIDR{' '}
            <Code fz={13} fw={600} bg="carbon.3">
              {cidrData?.cidr}
            </Code>{' '}
            from the region{' '}
            <Code fz={13} fw={600} bg="carbon.3" display="inline-block">
              {cidrData?.region?.display_name}
            </Code>
            ?
          </Typography>
          <Group justify="flex-end">
            <Button
              variant="default"
              onClick={onClose}
              data-mp-event={`${providerLabel} CIDR deletion cancel button clicked`}
            >
              Cancel
            </Button>
            <Button
              variant="light"
              color="red"
              loading={cidrDeletion.isLoading}
              disabled={disabled}
              onClick={onDelete}
              data-mp-event={`${providerLabel} CIDR deletion confirm button clicked`}
            >
              Delete
            </Button>
          </Group>
        </Stack>
      </Modal>
    </>
  )
})