import { PaddingType, ResponsiveType } from '../../types/ui.type';

/**
 * Options for how the backdrop behaves when the modal is open.
 */
export type VegaModalBackdrop = 'static' | 'none' | 'default';
/**
 * Color style options for the modal backdrop.
 */
export type VegaModalBackdropColor = 'semi' | 'none' | 'default';

/**
 * Section Padding options for the modal.
 */
export type VegaModalSectionPadding = {
	header?: ResponsiveType<PaddingType>;
	content?: ResponsiveType<PaddingType>;
	footer?: ResponsiveType<PaddingType>;
};

/**
 * Describes what caused a modal's open state to change.
 */
export type VegaModalOpenStateChangeTrigger =
	| 'backdrop' // User clicks the backdrop, and it is allowed to close the modal.
	| 'close-button' // User clicks the close button located in the top right corner of the modal.
	| 'remove-node' // The modal element leaves the DOM (disconnectedCallback).
	| 'method' // The public modal('hide/show') method triggers to close or show modal by user.
	| 'property' // The `open` property is changed by user.
	| 'data-target' // The target element clicked has a `data-target='modal'` attribute and open the modal.
	| 'data-dismiss'; // The target element clicked has a `data-dismiss='modal'` attribute and close the modal.