import React from "react";
import { PlusModal as PlusModalElement } from "../dist/components/modal/index.js";

export type { PlusModalElement };

export interface PlusModalProps
  extends Pick<
    React.AllHTMLAttributes<HTMLElement>,
    | "children"
    | "dir"
    | "hidden"
    | "id"
    | "lang"
    | "slot"
    | "style"
    | "title"
    | "translate"
    | "onClick"
    | "onFocus"
    | "onBlur"
  > {
  /** Whether the modal is open */
  isOpen?: boolean;

  /** Whether the modal should take full width */
  fullWidth?: boolean;

  /** Makes the modal take the full screen (100vw x 100vh, no border radius) */
  fullScreen?: boolean;

  /** Controls backdrop behavior
- true: Shows backdrop, modal can be closed by clicking outside
- false: No backdrop
- 'static': Shows backdrop but prevents closing by clicking outside (triggers shake animation) */
  backdrop?: boolean | "static";

  /** Whether the modal should close when clicking the backdrop */
  closeOnBackdrop?: boolean;

  /** Whether the modal should close when pressing the Escape key */
  closeOnEsc?: boolean;

  /** Hides the header section completely */
  noHeader?: boolean;

  /** Hides the footer section completely */
  noFooter?: boolean;

  /** The size of the modal */
  size?: PlusModalElement["size"];

  /** The placement of the modal on the screen */
  placement?: PlusModalElement["placement"];

  /** The duration of the animation in milliseconds */
  animationDuration?: PlusModalElement["animationDuration"];

  /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */
  className?: string;

  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
  exportparts?: string;

  /** Used for labels to link them with their inputs (using input id). */
  htmlFor?: string;

  /** Used to help React identify which items have changed, are added, or are removed within a list. */
  key?: number | string;

  /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
  part?: string;

  /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */
  ref?: any;

  /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */
  tabIndex?: number;

  /** Emitted after the modal has opened */
  onPlusModalOpen?: (event: CustomEvent) => void;

  /** Emitted after the modal has closed */
  onPlusModalClose?: (event: CustomEvent) => void;

  /** Emitted before the modal opens (cancelable) */
  onPlusModalBeforeOpen?: (event: CustomEvent) => void;

  /** Emitted before the modal closes (cancelable) */
  onPlusModalBeforeClose?: (event: CustomEvent) => void;
}

/**
 * Modal dialog component built on native HTML Dialog API. Displays content in a layer above the page with full keyboard and focus management.
 * ---
 *
 *
 * ### **Events:**
 *  - **plus-modal-open** - Emitted after the modal has opened
 * - **plus-modal-close** - Emitted after the modal has closed
 * - **plus-modal-before-open** - Emitted before the modal opens (cancelable)
 * - **plus-modal-before-close** - Emitted before the modal closes (cancelable)
 *
 * ### **Methods:**
 *  - **show(): _Promise<void>_** - Shows the modal with animation
 * - **hide(): _Promise<void>_** - Hides the modal with animation
 * - **toggle(): _Promise<void>_** - Toggles the modal open/closed state
 *
 * ### **Slots:**
 *  - _default_ - Main content area (same as body slot)
 * - **header** - The header content of the modal
 * - **body** - The main content of the modal (alternative to default slot)
 * - **footer** - The footer content of the modal
 * - **close** - Custom close button (defaults to an X icon)
 *
 * ### **CSS Parts:**
 *  - **dialog** - The native dialog element
 * - **container** - The container wrapper for centering and scrolling
 * - **modal** - The main modal box
 * - **header** - The header section
 * - **header-content** - The content wrapper inside header
 * - **body** - The main content area
 * - **footer** - The footer section
 * - **close-button** - The close button element
 */
export const PlusModal: React.ForwardRefExoticComponent<PlusModalProps>;