Overlay Management

/**
 * Hook for managing alert dialogs.
 * Returns functions to present and dismiss alerts.
 * @returns [present, dismiss] - Functions to show and hide alerts
 */
function useIonAlert(): [
  {
    (message: string, buttons?: AlertButton[]): Promise<void>;
    (options: AlertOptions): Promise<void>;
  },
  () => Promise<void>
];

interface AlertOptions {
  /** Alert header text */
  header?: string;
  /** Alert subheader text */
  subHeader?: string;
  /** Alert message content */
  message?: string;
  /** Array of buttons or button configurations */
  buttons?: (string | AlertButton)[];
  /** Array of input fields */
  inputs?: AlertInput[];
  /** Custom CSS class */
  cssClass?: string;
  /** Whether clicking backdrop dismisses alert */
  backdropDismiss?: boolean;
  /** Whether alert is translucent */
  translucent?: boolean;
  /** Animation to use when presenting */
  enterAnimation?: any;
  /** Animation to use when dismissing */
  leaveAnimation?: any;
}

interface AlertButton {
  /** Button text */
  text: string;
  /** Button role */
  role?: 'cancel' | 'destructive';
  /** Custom CSS class */
  cssClass?: string;
  /** Click handler */
  handler?: (value: any) => boolean | void | Promise<boolean | void>;
}

interface AlertInput {
  /** Input type */
  type?: 'text' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'url' | 'checkbox' | 'radio';
  /** Input name */
  name?: string;
  /** Input placeholder */
  placeholder?: string;
  /** Input value */
  value?: any;
  /** Whether input is checked (for checkbox/radio) */
  checked?: boolean;
  /** Whether input is disabled */
  disabled?: boolean;
  /** Input id */
  id?: string;
}

/**
 * Hook for managing modal dialogs with React components.
 * @param component - React component to render in modal
 * @param componentProps - Props to pass to the component
 * @returns [present, dismiss] - Functions to show and hide modals
 */
function useIonModal(
  component: ReactComponentOrElement,
  componentProps?: any
): [
  (options?: ModalOptions) => Promise<void>,
  () => Promise<void>
];

type ReactComponentOrElement = React.ComponentType<any> | React.ReactElement;

interface ModalOptions {
  /** Whether to show backdrop */
  showBackdrop?: boolean;
  /** Whether clicking backdrop dismisses modal */
  backdropDismiss?: boolean;
  /** Custom CSS class */
  cssClass?: string;
  /** Whether modal can be dismissed by swipe gesture */
  canDismiss?: boolean | (() => Promise<boolean>);
  /** Breakpoints for sheet-style modals */
  breakpoints?: number[];
  /** Initial breakpoint for sheet-style modals */
  initialBreakpoint?: number;
  /** Animation to use when presenting */
  enterAnimation?: any;
  /** Animation to use when dismissing */
  leaveAnimation?: any;
  /** Callback when modal will dismiss */
  onWillDismiss?: (event: CustomEvent) => void;
  /** Callback when modal did dismiss */
  onDidDismiss?: (event: CustomEvent) => void;
}

/**
 * Hook for managing toast notifications.
 * Returns functions to present and dismiss toasts.
 * @returns [present, dismiss] - Functions to show and hide toasts
 */
function useIonToast(): [
  (options: ToastOptions) => Promise<void>,
  () => void
];

interface ToastOptions {
  /** Toast message text */
  message: string;
  /** Duration in milliseconds (0 = indefinite) */
  duration?: number;
  /** Position on screen */
  position?: 'top' | 'middle' | 'bottom';
  /** Toast color theme */
  color?: string;
  /** Custom CSS class */
  cssClass?: string;
  /** Array of action buttons */
  buttons?: (string | ToastButton)[];
  /** Icon to display */
  icon?: any;
  /** Whether toast is translucent */
  translucent?: boolean;
  /** Animation to use when presenting */
  enterAnimation?: any;
  /** Animation to use when dismissing */
  leaveAnimation?: any;
}

interface ToastButton {
  /** Button text */
  text?: string;
  /** Button icon */
  icon?: any;
  /** Button side */
  side?: 'start' | 'end';
  /** Button role */
  role?: 'cancel';
  /** Custom CSS class */
  cssClass?: string;
  /** Click handler */
  handler?: () => boolean | void | Promise<boolean | void>;
}

/**
 * Hook for managing action sheet overlays.
 * Returns functions to present and dismiss action sheets.
 * @returns [present, dismiss] - Functions to show and hide action sheets
 */
function useIonActionSheet(): [
  (options: ActionSheetOptions) => Promise<void>,
  () => void
];

interface ActionSheetOptions {
  /** Action sheet header text */
  header?: string;
  /** Action sheet subheader text */
  subHeader?: string;
  /** Array of action buttons */
  buttons: (string | ActionSheetButton)[];
  /** Custom CSS class */
  cssClass?: string;
  /** Whether clicking backdrop dismisses action sheet */
  backdropDismiss?: boolean;
  /** Whether action sheet is translucent */
  translucent?: boolean;
  /** Animation to use when presenting */
  enterAnimation?: any;
  /** Animation to use when dismissing */
  leaveAnimation?: any;
}

interface ActionSheetButton {
  /** Button text */
  text: string;
  /** Button role */
  role?: 'cancel' | 'destructive';
  /** Button icon */
  icon?: any;
  /** Custom CSS class */
  cssClass?: string;
  /** Click handler */
  handler?: () => boolean | void | Promise<boolean | void>;
}

/**
 * Hook for managing popover overlays.
 * Returns functions to present and dismiss popovers.
 * @returns [present, dismiss] - Functions to show and hide popovers
 */
function useIonPopover(): [
  (options: PopoverOptions) => Promise<void>,
  () => void
];

interface PopoverOptions {
  /** React component to render in popover */
  component: React.ComponentType<any>;
  /** Props to pass to the component */
  componentProps?: any;
  /** Element to anchor popover to */
  event?: Event;
  /** Reference element for positioning */
  reference?: 'event' | 'trigger';
  /** Side to present popover on */
  side?: 'top' | 'right' | 'bottom' | 'left';
  /** Alignment relative to reference */
  alignment?: 'start' | 'center' | 'end';
  /** Whether to show backdrop */
  showBackdrop?: boolean;
  /** Whether clicking backdrop dismisses popover */
  backdropDismiss?: boolean;
  /** Custom CSS class */
  cssClass?: string;
  /** Whether popover is translucent */
  translucent?: boolean;
}

/**
 * Hook for managing loading overlays.
 * Returns functions to present and dismiss loading indicators.
 * @returns [present, dismiss] - Functions to show and hide loading
 */
function useIonLoading(): [
  (options?: LoadingOptions) => Promise<void>,
  () => void
];

interface LoadingOptions {
  /** Loading message text */
  message?: string;
  /** Duration in milliseconds (0 = indefinite) */
  duration?: number;
  /** Spinner type */
  spinner?: 'bubbles' | 'circles' | 'circular' | 'crescent' | 'dots' | 'lines' | 'lines-small';
  /** Custom CSS class */
  cssClass?: string;
  /** Whether to show backdrop */
  showBackdrop?: boolean;
  /** Whether clicking backdrop dismisses loading */
  backdropDismiss?: boolean;
  /** Whether loading is translucent */
  translucent?: boolean;
}

/**
 * Hook for managing picker overlays.
 * Returns functions to present and dismiss pickers.
 * @returns [present, dismiss] - Functions to show and hide pickers
 */
function useIonPicker(): [
  (options: PickerOptions) => Promise<void>,
  () => void
];

interface PickerOptions {
  /** Array of picker columns */
  columns: PickerColumn[];
  /** Array of buttons */
  buttons?: PickerButton[];
  /** Custom CSS class */
  cssClass?: string;
  /** Whether to show backdrop */
  showBackdrop?: boolean;
  /** Whether clicking backdrop dismisses picker */
  backdropDismiss?: boolean;
  /** Animation to use when presenting */
  enterAnimation?: any;
  /** Animation to use when dismissing */
  leaveAnimation?: any;
}

interface PickerColumn {
  /** Column name */
  name: string;
  /** Array of options */
  options: PickerColumnOption[];
  /** Selected option index */
  selectedIndex?: number;
}

interface PickerColumnOption {
  /** Option text */
  text: string;
  /** Option value */
  value: any;
  /** Whether option is disabled */
  disabled?: boolean;
}

interface PickerButton {
  /** Button text */
  text: string;
  /** Button role */
  role?: 'cancel';
  /** Custom CSS class */
  cssClass?: string;
  /** Click handler */
  handler?: (value: any) => boolean | void | Promise<boolean | void>;
}

import React from 'react';
import { 
  useIonAlert, useIonModal, useIonToast, 
  useIonActionSheet, useIonLoading 
} from '@ionic/react';

const OverlayExample: React.FC = () => {
  const [presentAlert, dismissAlert] = useIonAlert();
  const [presentToast, dismissToast] = useIonToast();
  const [presentActionSheet, dismissActionSheet] = useIonActionSheet();
  const [presentLoading, dismissLoading] = useIonLoading();

  const showAlert = () => {
    presentAlert({
      header: 'Confirm',
      message: 'Are you sure?',
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel'
        },
        {
          text: 'OK',
          handler: () => {
            console.log('Confirmed');
          }
        }
      ]
    });
  };

  const showToast = () => {
    presentToast({
      message: 'Hello World!',
      duration: 3000,
      position: 'bottom'
    });
  };

  const showActionSheet = () => {
    presentActionSheet({
      header: 'Choose Action',
      buttons: [
        {
          text: 'Edit',
          handler: () => console.log('Edit')
        },
        {
          text: 'Delete',
          role: 'destructive',
          handler: () => console.log('Delete')
        },
        {
          text: 'Cancel',
          role: 'cancel'
        }
      ]
    });
  };

  const showLoading = async () => {
    await presentLoading({
      message: 'Please wait...',
      duration: 2000
    });
  };

  return (
    <div>
      <IonButton onClick={showAlert}>Show Alert</IonButton>
      <IonButton onClick={showToast}>Show Toast</IonButton>
      <IonButton onClick={showActionSheet}>Show Action Sheet</IonButton>
      <IonButton onClick={showLoading}>Show Loading</IonButton>
    </div>
  );
};

// Modal example with custom component
const ModalContentComponent: React.FC<{ dismiss: () => void }> = ({ dismiss }) => (
  <IonPage>
    <IonHeader>
      <IonToolbar>
        <IonTitle>Modal</IonTitle>
        <IonButtons slot="end">
          <IonButton onClick={dismiss}>Close</IonButton>
        </IonButtons>
      </IonToolbar>
    </IonHeader>
    <IonContent>
      <p>This is modal content</p>
    </IonContent>
  </IonPage>
);

const ModalExample: React.FC = () => {
  const [presentModal, dismissModal] = useIonModal(ModalContentComponent, {
    dismiss: () => dismissModal()
  });

  return (
    <IonButton onClick={() => presentModal()}>
      Open Modal
    </IonButton>
  );
};