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

import { PropertyKV } from 'dbaas/components'
import { useNetworkContainerServiceDeleteVpcPeering } from 'dbaas/services/api-clients/v2023/dedicated/v1beta1'
import { Dedicatedv1beta1VpcPeering } from 'dbaas/services/api-clients/v2023/dedicated/v1beta1/interface'
import { getErrorMessage } from 'dbaas/services/errorCodes'
import useStores from 'dbaas/stores/useStores'

interface DeletionModalProps {
  opened: boolean
  onClose: () => void
  onConfirm?: () => void
  data?: Dedicatedv1beta1VpcPeering
  extraDesc?: React.ReactNode
}

export const DeletionModal = observer(({ opened, onClose, onConfirm, data, extraDesc }: DeletionModalProps) => {
  const { vpcPeeringId = '' } = data || {}
  const {
    store: {
      lastVisitLocation: { orgId, projectId }
    }
  } = useStores()

  const deletion = useNetworkContainerServiceDeleteVpcPeering({
    mutation: {
      onError: (err) => {
        notifier.error(getErrorMessage(err, true))
      }
    }
  })
  const onDelete = async () => {
    await deletion.mutateAsync({
      vpcPeeringId,
      params: {
        orgId,
        projectId
      }
    })

    onConfirm?.()
    onClose()
  }

  return (
    <Modal centered size="lg" opened={opened} title="Delete Google Cloud VPC Peering" onClose={onClose}>
      <Stack>
        {data && (
          <Stack gap="sm">
            {data.vpcPeeringId && (
              <PropertyKV label="Peering ID" labelProps={{ w: 180 }}>
                {data.vpcPeeringId}
              </PropertyKV>
            )}
            <PropertyKV label="Peering Connection ID" labelProps={{ w: 180 }}>
              {data.awsVpcPeeringConnectionId || '-'}
            </PropertyKV>
            <PropertyKV label="TiDB Cloud VPC Region" labelProps={{ w: 180 }}>
              {data.tidbCloudRegionId}
            </PropertyKV>
            <PropertyKV label="Your VPC Network Name" labelProps={{ w: 180 }}>
              {data.customerVpcId}
            </PropertyKV>
            <PropertyKV label="Your VPC CIDR" labelProps={{ w: 180 }}>
              {data.customerVpcCidr}
            </PropertyKV>
          </Stack>
        )}
        <Typography variant="body-lg">
          Are you sure to delete this Google Cloud VPC peering? Deleted information cannot be recovered.
        </Typography>
        {extraDesc}
        <Group justify="flex-end">
          <Button
            variant="default"
            onClick={onClose}
            data-mp-event="Cancel Delete VPC Peering Button Clicked"
            data-mp-provider="gcp"
          >
            Cancel
          </Button>
          <Button
            color="red"
            variant="light"
            loading={deletion.isLoading}
            disabled={!vpcPeeringId}
            onClick={onDelete}
            data-mp-event="Confirm Delete VPC Peering Button Clicked"
            data-mp-provider="gcp"
          >
            I understand, delete it
          </Button>
        </Group>
      </Stack>
    </Modal>
  )
})