Confirmation Modals

/**
 * Opens a confirmation modal with confirm/cancel buttons
 * @param props - Confirmation modal configuration
 * @returns Modal ID for future reference
 */
function openConfirmModal(props: OpenConfirmModal): string;

interface OpenConfirmModal extends ModalSettings, ConfirmModalProps {}

import { openConfirmModal } from "@mantine/modals";
import { Text } from "@mantine/core";

// Simple confirmation
openConfirmModal({
  title: "Confirm action",
  children: <Text>Are you sure you want to proceed?</Text>,
  labels: { confirm: "Yes", cancel: "No" },
  onConfirm: () => console.log("Confirmed"),
  onCancel: () => console.log("Cancelled"),
});

// Destructive action confirmation
openConfirmModal({
  title: "Delete item",
  children: (
    <Text>
      This action cannot be undone. Are you sure you want to delete this item?
    </Text>
  ),
  labels: { confirm: "Delete", cancel: "Cancel" },
  confirmProps: { color: "red" },
  onConfirm: () => {
    // Perform deletion
    deleteItem();
  },
  onCancel: () => console.log("Deletion cancelled"),
});

// Custom styling and behavior
openConfirmModal({
  title: "Save changes",
  children: <Text>You have unsaved changes. Do you want to save them?</Text>,
  labels: { confirm: "Save", cancel: "Discard" },
  confirmProps: { 
    color: "blue",
    variant: "filled" 
  },
  cancelProps: { 
    variant: "default" 
  },
  closeOnConfirm: false, // Don't auto-close on confirm
  closeOnCancel: true,
  centered: true,
  onConfirm: async () => {
    await saveChanges();
    // Manually close after async operation
    closeModal(modalId);
  },
});

/**
 * Props for confirmation modal component
 */
interface ConfirmModalProps {
  /** Modal instance ID */
  id?: string;
  /** Modal content above buttons */
  children?: React.ReactNode;
  /** Callback when cancel button is clicked */
  onCancel?: () => void;
  /** Callback when confirm button is clicked */
  onConfirm?: () => void;
  /** Whether to close modal when confirm is clicked (default: true) */
  closeOnConfirm?: boolean;
  /** Whether to close modal when cancel is clicked (default: true) */
  closeOnCancel?: boolean;
  /** Props for cancel button */
  cancelProps?: ButtonProps & 
    React.ComponentPropsWithoutRef<'button'> & 
    Record<`data-${string}`, any>;
  /** Props for confirm button */
  confirmProps?: ButtonProps & 
    React.ComponentPropsWithoutRef<'button'> & 
    Record<`data-${string}`, any>;
  /** Props for button group container */
  groupProps?: GroupProps;
  /** Custom labels for buttons */
  labels?: ConfirmLabels;
}

/**
 * Button labels for confirmation modal
 */
interface ConfirmLabels {
  /** Confirm button text or element */
  confirm: React.ReactNode;
  /** Cancel button text or element */
  cancel: React.ReactNode;
}

import { openConfirmModal } from "@mantine/modals";

// Custom button styling
openConfirmModal({
  title: "Custom Buttons",
  children: <Text>Example with custom button styling</Text>,
  labels: { confirm: "Proceed", cancel: "Go Back" },
  confirmProps: {
    color: "green",
    variant: "filled",
    size: "md",
    leftSection: "✓",
  },
  cancelProps: {
    color: "gray",
    variant: "outline",
    size: "md",
    leftSection: "✗",
  },
  groupProps: {
    justify: "center",
    gap: "md",
  },
});

// HTML elements as labels
openConfirmModal({
  title: "Rich Labels",
  children: <Text>Buttons can have rich content</Text>,
  labels: {
    confirm: (
      <span>
        <strong>Delete</strong>
        <small style={{ display: "block" }}>This cannot be undone</small>
      </span>
    ),
    cancel: "Keep Item",
  },
  confirmProps: { color: "red" },
});

import { openConfirmModal, closeModal, updateModal } from "@mantine/modals";

// Multi-step confirmation
function deleteWithWarning() {
  const firstModalId = openConfirmModal({
    title: "Delete confirmation",
    children: <Text>This will permanently delete the item.</Text>,
    labels: { confirm: "I understand", cancel: "Cancel" },
    closeOnConfirm: false,
    onConfirm: () => {
      // Close first modal
      closeModal(firstModalId);
      
      // Open second confirmation
      openConfirmModal({
        title: "Final confirmation",
        children: (
          <Text c="red" fw="bold">
            This action cannot be undone. Type "DELETE" to confirm.
          </Text>
        ),
        labels: { confirm: "DELETE", cancel: "Cancel" },
        confirmProps: { color: "red" },
        onConfirm: () => performDeletion(),
      });
    },
  });
}

// Dynamic modal updates
function saveWithProgress() {
  const modalId = openConfirmModal({
    title: "Save changes",
    children: <Text>Ready to save your changes?</Text>,
    labels: { confirm: "Save", cancel: "Cancel" },
    closeOnConfirm: false,
    onConfirm: async () => {
      // Update to show progress
      updateModal({
        modalId,
        title: "Saving...",
        children: <Text>Saving changes, please wait...</Text>,
      });
      
      try {
        await saveChanges();
        updateModal({
          modalId,
          title: "Success",
          children: <Text c="green">Changes saved successfully!</Text>,
        });
        
        // Close after delay
        setTimeout(() => closeModal(modalId), 2000);
      } catch (error) {
        updateModal({
          modalId,
          title: "Error",
          children: <Text c="red">Failed to save changes.</Text>,
        });
      }
    },
  });
}

// Conditional confirmation
function smartDelete(hasUnsavedChanges: boolean) {
  if (hasUnsavedChanges) {
    openConfirmModal({
      title: "Unsaved changes",
      children: <Text>You have unsaved changes. Save before deleting?</Text>,
      labels: { confirm: "Save & Delete", cancel: "Cancel" },
      onConfirm: async () => {
        await saveChanges();
        performDeletion();
      },
    });
  } else {
    openConfirmModal({
      title: "Delete item",
      children: <Text>Are you sure you want to delete this item?</Text>,
      labels: { confirm: "Delete", cancel: "Cancel" },
      confirmProps: { color: "red" },
      onConfirm: performDeletion,
    });
  }
}