Dialog Creation and Management

/**
 * Display a SweetAlert2 popup with comprehensive configuration options
 * @param options - Configuration object with all available popup settings
 * @returns Promise resolving to user interaction result
 */
function fire<T = any>(options: SweetAlertOptions): Promise<SweetAlertResult<Awaited<T>>>;

// Basic popup with options
const result = await Swal.fire({
  title: 'Are you sure?',
  text: "You won't be able to revert this!",
  icon: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Yes, delete it!'
});

// Input popup
const { value: email } = await Swal.fire({
  title: 'Enter your email',
  input: 'email',
  inputLabel: 'Your email address',
  inputPlaceholder: 'Enter your email address',
  inputValidator: (value) => {
    if (!value) {
      return 'You need to write something!'
    }
  }
});

// Advanced configuration
await Swal.fire({
  title: 'Custom HTML Example',
  html: `
    <p>You can use <strong>HTML</strong> in your message.</p>
    <p>Including <em>formatted text</em> and <a href="#">links</a>.</p>
  `,
  icon: 'info',
  showCloseButton: true,
  showCancelButton: true,
  focusConfirm: false,
  confirmButtonText: 'Great!',
  confirmButtonAriaLabel: 'Thumbs up, great!',
  cancelButtonText: 'No, thanks',
  cancelButtonAriaLabel: 'Thumbs down'
});

/**
 * Display a simple SweetAlert2 popup with positional arguments
 * @param title - Optional popup title
 * @param html - Optional popup content (HTML/text)
 * @param icon - Optional icon type
 * @returns Promise resolving to user interaction result
 */
function fire<T = any>(title?: string, html?: string, icon?: SweetAlertIcon): Promise<SweetAlertResult<Awaited<T>>>;

// Simple alert
await Swal.fire('Hello world!');

// Alert with title and text
await Swal.fire('Good job!', 'You clicked the button!', 'success');

// Alert with icon
await Swal.fire('Oops...', 'Something went wrong!', 'error');

/**
 * Create a Swal instance with default options for reuse
 * @param options - Default options to apply to all calls from this instance
 * @returns New Swal instance with default options applied
 */
function mixin(options: SweetAlertOptions): typeof Swal;

// Create toast mixin
const Toast = Swal.mixin({
  toast: true,
  position: 'top-end',
  showConfirmButton: false,
  timer: 3000,
  timerProgressBar: true,
  didOpen: (toast) => {
    toast.addEventListener('mouseenter', Swal.stopTimer)
    toast.addEventListener('mouseleave', Swal.resumeTimer)
  }
});

// Use toast mixin
Toast.fire({
  icon: 'success',
  title: 'Signed in successfully'
});

Toast.fire({
  icon: 'error',
  title: 'Login failed'
});

// Create confirmation dialog mixin
const ConfirmDialog = Swal.mixin({
  customClass: {
    confirmButton: 'btn btn-success',
    cancelButton: 'btn btn-danger'
  },
  buttonsStyling: false,
  showCancelButton: true,
  confirmButtonText: 'Yes',
  cancelButtonText: 'No'
});

const result = await ConfirmDialog.fire({
  title: 'Delete item?',
  text: 'This action cannot be undone'
});

interface SweetAlertOptions {
  // Content
  title?: string | HTMLElement | JQuery;
  titleText?: string;
  text?: string;
  html?: string | HTMLElement | JQuery;
  footer?: string | HTMLElement | JQuery;
  
  // Visual appearance
  icon?: SweetAlertIcon;
  iconColor?: string;
  iconHtml?: string;
  imageUrl?: string;
  imageWidth?: number | string;
  imageHeight?: number | string;
  imageAlt?: string;
  
  // Layout and positioning
  toast?: boolean;
  position?: SweetAlertPosition;
  grow?: SweetAlertGrow;
  width?: number | string;
  padding?: number | string;
  color?: string;
  background?: string;
  backdrop?: boolean | string;
  theme?: SweetAlertTheme;
  
  // Buttons
  showConfirmButton?: boolean;
  showDenyButton?: boolean;
  showCancelButton?: boolean;
  confirmButtonText?: string;
  denyButtonText?: string;
  cancelButtonText?: string;
  confirmButtonColor?: string;
  denyButtonColor?: string;
  cancelButtonColor?: string;
  confirmButtonAriaLabel?: string;
  denyButtonAriaLabel?: string;
  cancelButtonAriaLabel?: string;
  buttonsStyling?: boolean;
  reverseButtons?: boolean;
  
  // Interaction
  allowOutsideClick?: ValueOrThunk<boolean>;
  allowEscapeKey?: ValueOrThunk<boolean>;
  allowEnterKey?: ValueOrThunk<boolean>;
  stopKeydownPropagation?: boolean;
  keydownListenerCapture?: boolean;
  
  // Focus management
  focusConfirm?: boolean;
  focusDeny?: boolean;
  focusCancel?: boolean;
  returnFocus?: boolean;
  
  // Input
  input?: SweetAlertInput;
  inputValue?: SyncOrAsync<string | number | File | FileList> | null;
  inputPlaceholder?: string;
  inputLabel?: string;
  inputOptions?: SyncOrAsync<ReadonlyMap<string, string> | Record<string, any>>;
  inputAutoTrim?: boolean;
  inputAutoFocus?: boolean;
  inputAttributes?: Record<string, string>;
  inputValidator?: (value: any) => SyncOrAsync<string | null | false | void>;
  validationMessage?: string;
  returnInputValueOnDeny?: boolean;
  
  // Timing
  timer?: number;
  timerProgressBar?: boolean;
  
  // Events and hooks
  willOpen?: (popup: HTMLElement) => void;
  didOpen?: (popup: HTMLElement) => void;
  didRender?: (popup: HTMLElement) => void;
  willClose?: (popup: HTMLElement) => void;
  didClose?: () => void;
  didDestroy?: () => void;
  
  // Event handling
  on?: Record<SweetAlertEventName, (event: any) => void>;
  once?: Record<SweetAlertEventName, (event: any) => void>;
  off?: (event?: SweetAlertEventName) => void;
  
  // Loading
  showLoaderOnConfirm?: boolean;
  showLoaderOnDeny?: boolean;
  preConfirm?: (inputValue: any) => SyncOrAsync<any>;
  preDeny?: (value: any) => SyncOrAsync<any | void>;
  
  // Styling and animation
  customClass?: SweetAlertCustomClass;
  showClass?: SweetAlertShowClass;
  hideClass?: SweetAlertHideClass;
  animation?: boolean;
  
  // Advanced
  target?: string | HTMLElement | null;
  template?: string | HTMLTemplateElement;
  progressSteps?: readonly string[];
  currentProgressStep?: number;
  progressStepsDistance?: number | string;
  heightAuto?: boolean;
  scrollbarPadding?: boolean;
  draggable?: boolean;
  topLayer?: boolean;
  
  // Close button
  showCloseButton?: boolean;
  closeButtonHtml?: string;
  closeButtonAriaLabel?: string;
  loaderHtml?: string;
}

type SweetAlertGrow = 'row' | 'column' | 'fullscreen' | false;
type ValueOrThunk<T> = T | (() => T);
type SyncOrAsync<T> = T | Promise<T> | { toPromise: () => T };

interface SweetAlertCustomClass {
  container?: string | readonly string[];
  popup?: string | readonly string[];
  title?: string | readonly string[];
  closeButton?: string | readonly string[];
  icon?: string | readonly string[];
  image?: string | readonly string[];
  htmlContainer?: string | readonly string[];
  input?: string | readonly string[];
  inputLabel?: string | readonly string[];
  validationMessage?: string | readonly string[];
  actions?: string | readonly string[];
  confirmButton?: string | readonly string[];
  denyButton?: string | readonly string[];
  cancelButton?: string | readonly string[];
  loader?: string | readonly string[];
  footer?: string | readonly string[];
  timerProgressBar?: string | readonly string[];
}

interface SweetAlertHideShowClass {
  backdrop?: string | readonly string[];
  icon?: string | readonly string[];
  popup?: string | readonly string[];
}

type SweetAlertShowClass = Readonly<SweetAlertHideShowClass>;
type SweetAlertHideClass = SweetAlertHideShowClass;