import { Alert, Box, Group, Modal, notifier, Stack, Typography } from '@tidbcloud/uikit'
import { Form } from '@tidbcloud/uikit/biz'
import { IconXCircle } from '@tidbcloud/uikit/icons'
import { capitalize } from 'lodash-es'

import { useDeleteAlertSubscriber } from 'dbaas/services/clinicService'
import { EntityAlertSubscribersItem, EntityAlertSubscriberType } from 'dbaas/services/clinicService/interface'
import { getErrorMessage } from 'dbaas/services/errorCodes'
import { eventTracking } from 'dbaas/utils/tracking'

interface DeleteModalProps {
  subscriber: EntityAlertSubscribersItem | null
  orgId: string
  projectId: string
  opened: boolean
  onCancel: () => void
  onDelete: () => void
}

export const DeleteModal = ({ opened, orgId, projectId, subscriber, onCancel, onDelete }: DeleteModalProps) => {
  const { mutateAsync, error, isLoading } = useDeleteAlertSubscriber()
  const subscribeType = subscriber?.subscriberType

  return (
    <Modal centered opened={opened} size={640} onClose={onCancel} title="Unsubscribe">
      <Form
        actionsProps={{
          confirmText: 'Unsubscribe',
          confirmProps: {
            variant: 'light',
            color: 'red'
          },
          loading: isLoading
        }}
        onCancel={onCancel}
        onSubmit={async () => {
          await mutateAsync({ orgId, projectId, alertSubscriberId: String(subscriber?.id) ?? '' })
          eventTracking('Alerts Subscription Unsubscribe Confirmed Button Clicked')
          onDelete()
          notifier.success(
            `${
              subscribeType === EntityAlertSubscriberType.EMAIL ? subscriber?.email : subscriber?.name
            } has unsubscribed the alerts.`
          )
        }}
      >
        <Stack>
          <Box>
            <PropertyItem label="Subscriber Type" value={capitalize(subscribeType)} />
            {subscribeType === EntityAlertSubscriberType.EMAIL && (
              <PropertyItem label="Email Address" value={subscriber?.email} />
            )}
            {subscribeType === EntityAlertSubscriberType.SLACK && (
              <>
                <PropertyItem label="Name" value={subscriber?.name} />
                <PropertyItem label="URL" value={subscriber?.slackUrl} />
              </>
            )}
            {subscribeType === EntityAlertSubscriberType.ZOOM && (
              <>
                <PropertyItem label="Name" value={subscriber?.name} />
                <PropertyItem label="URL" value={subscriber?.zoomUrl} />
              </>
            )}
            {subscribeType === EntityAlertSubscriberType.WEBHOOK && (
              <>
                <PropertyItem label="Name" value={subscriber?.name} />
                <PropertyItem label="Webhook URL" value={subscriber?.webhookUrl} />
              </>
            )}
            {subscribeType === EntityAlertSubscriberType.LARK && (
              <>
                <PropertyItem label="Name" value={subscriber?.name} />
                <PropertyItem label="Webhook URL" value={subscriber?.larkWebhookUrl} />
                <PropertyItem label="Secret" value={subscriber?.larkSecret} />
              </>
            )}
          </Box>
          <Typography variant="body-lg">Confirm if you want to unsubscribe from this project.</Typography>
          {!!error && (
            <Alert color="red" icon={<IconXCircle size={14} />}>
              {getErrorMessage(error)}
            </Alert>
          )}
        </Stack>
      </Form>
    </Modal>
  )
}

const PropertyItem = ({ label, value }: { label: string; value: React.ReactNode }) => {
  return (
    <Group gap="md" wrap="nowrap" mih={36}>
      <Typography variant="body-lg" miw={150} c="carbon.7">
        {label}
      </Typography>
      <Typography variant="body-lg" sx={{ wordBreak: 'break-all' }}>
        {value}
      </Typography>
    </Group>
  )
}