/**
 * WordPress dependencies
 */
import type { useFocusOnMount } from '@wordpress/compose';

export type ModalProps = {
	aria?: {
		/**
		 * If this property is added, it will be added to the modal content
		 * `div` as `aria-describedby`.
		 */
		describedby?: string;
		/**
		 * If this property is added, it will be added to the modal content
		 * `div` as `aria-labelledby`. Use this when you are rendering the title
		 * yourself within the modal's content area instead of using the `title`
		 * prop. This ensures the title is usable by assistive technology.
		 *
		 * Titles are required for accessibility reasons, see `contentLabel` and
		 * `title` for other ways to provide a title.
		 */
		labelledby?: string;
	};
	/**
	 * Class name added to the body element when the modal is open.
	 *
	 * @default 'modal-open'
	 */
	bodyOpenClassName?: string;
	/**
	 * The children elements.
	 */
	children: React.ReactNode;
	/**
	 * If this property is added, it will an additional class name to the modal
	 * content `div`.
	 */
	className?: string;
	/**
	 * Label on the close button.
	 *
	 * @default `__( 'Close' )`
	 */
	closeButtonLabel?: string;
	/**
	 * If this property is added, it will be added to the modal content `div` as
	 * `aria-label`.
	 *
	 * Titles are required for accessibility reasons, see `aria.labelledby` and
	 * `title` for other ways to provide a title.
	 */
	contentLabel?: string;
	/**
	 * Determines focus behavior when the modal opens.
	 *
	 * - `"firstElement"` focuses the first tabbable element within.
	 * - `"firstInputElement"` focuses the first value control within.
	 * - `"firstContentElement"` focuses the first tabbable element within the modal’s content element.
	 * - `true` focuses the element itself.
	 * - `false` does nothing and _should not be used unless an accessible
	 *    substitute behavior is implemented_.
	 *
	 * @default true
	 */
	focusOnMount?: useFocusOnMount.Mode | 'firstContentElement';
	/**
	 * Elements that are injected into the modal header to the left of the close button (if rendered).
	 * Hidden if `__experimentalHideHeader` is `true`.
	 *
	 * @default null
	 */
	headerActions?: React.ReactNode;

	/**
	 * If this property is added, an icon will be added before the title.
	 */
	icon?: React.JSX.Element;
	/**
	 * If this property is set to false, the modal will not display a close icon
	 * and cannot be dismissed.
	 *
	 * @default true
	 */
	isDismissible?: boolean;
	/**
	 * This property when set to `true` will render a full screen modal.
	 *
	 * @default false
	 */
	isFullScreen?: boolean;
	/**
	 * If this property is added it will cause the modal to render at a preset
	 * width, or expand to fill the screen. This prop will be ignored if
	 * `isFullScreen` is set to `true`.
	 *
	 * Note: `Modal`'s width can also be controlled by adjusting the width of the
	 * modal's contents, or via CSS using the `style` prop.
	 */
	size?: 'small' | 'medium' | 'large' | 'fill';
	/**
	 *  Handle the key down on the modal frame `div`.
	 */
	onKeyDown?: React.KeyboardEventHandler< HTMLDivElement >;
	/**
	 * This function is called to indicate that the modal should be closed.
	 */
	onRequestClose: (
		event?: React.KeyboardEvent< HTMLDivElement > | React.SyntheticEvent
	) => void;
	/**
	 * If this property is added, it will an additional class name to the modal
	 * overlay `div`.
	 */
	overlayClassName?: string;
	/**
	 * If this property is added, it will override the default role of the
	 * modal.
	 *
	 * @default 'dialog'
	 */
	role?: React.AriaRole;
	/**
	 * If this property is added, it will determine whether the modal requests
	 * to close when a mouse click occurs outside of the modal content.
	 *
	 * @default true
	 */
	shouldCloseOnClickOutside?: boolean;
	/**
	 * If this property is added, it will determine whether the modal requests
	 * to close when the escape key is pressed.
	 *
	 * @default true
	 */
	shouldCloseOnEsc?: boolean;
	/**
	 * If this property is added, it will be added to the modal frame `div`.
	 */
	style?: React.CSSProperties;
	/**
	 * This property is used as the modal header's title.
	 *
	 * Titles are required for accessibility reasons, see `aria.labelledby` and
	 * `contentLabel` for other ways to provide a title.
	 */
	title?: string;
	/**
	 * When set to `true`, the Modal's header (including the icon, title and
	 * close button) will not be rendered.
	 *
	 * _Warning_: This property is still experimental. “Experimental” means this
	 * is an early implementation subject to drastic and breaking changes.
	 *
	 * @default false
	 */
	__experimentalHideHeader?: boolean;
};