import { ButtonVariant } from "../Button/Button.types.js";
import { FormControlElement } from "../types.js";
import React from "react";

//#region src/Modal/Modal.types.d.ts
type ModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
type TitleIconPosition = 'left' | 'right';
type ModalProps = {
  /**
   * Main title text displayed prominently in the modal header.
   * This is the primary heading that identifies the purpose or content of the modal.
   */
  title: string;
  /**
   * Additional text to append after the main title.
   * Useful for adding context, version numbers, or secondary information to the title.
   */
  titleSuffixLabel?: string;
  /**
   * Secondary text displayed below the main title in the header.
   * Use this for additional context, descriptions, or instructions for the modal content.
   */
  subtitle?: string;
  /**
   * Icon to display next to the title in the header.
   * Can be an icon class name (string) for font icons or a React element for custom icons.
   * Helps provide visual context for the modal's purpose.
   */
  titleIcon?: string | React.ReactElement;
  /**
   * Position of the title icon relative to the title text:
   * - `left`: Icon appears before the title text
   * - `right`: Icon appears after the title text
   * @default 'left'
   */
  titleIconPosition?: TitleIconPosition;
  /**
   * Main content of the modal body.
   * This is where you place the primary content, forms, information, or interactive elements.
   * Accepts any renderable React content: elements, strings, numbers, arrays, fragments, etc.
   */
  children: React.ReactNode;
  /**
   * Custom footer content that completely replaces the default button footer.
   * When provided, all default buttons (submit, cancel, custom) are hidden.
   * Use this when you need complete control over the footer layout and actions.
   * Accepts any renderable React content: elements, strings, numbers, arrays, fragments, etc.
   */
  modalFooter?: React.ReactNode;
  /**
   * Controls whether the modal is currently visible and open.
   * When true, the modal is displayed with overlay. When false, the modal is hidden.
   * Use this prop to control modal visibility from parent components.
   */
  open: boolean;
  /**
   * Callback function triggered when the user attempts to close the modal.
   * Called when clicking the X button, cancel button, or clicking outside the modal.
   * Use this to handle modal closure logic and update the `open` state.
   */
  onClose?: () => void;
  /**
   * When true, displays an additional custom button in the footer alongside default buttons.
   * The custom button appears before the submit and cancel buttons.
   * Configure the button's appearance and behavior with related custom button props.
   */
  customButton?: boolean;
  /**
   * Text label for the custom button when `customButton` is true.
   * This text will be displayed on the button to indicate its purpose or action.
   */
  customButtonLabel?: string;
  /**
   * Callback function triggered when the custom button is clicked.
   * Use this to define the action that should occur when users click the custom button.
   */
  onClickCustomButton?: () => void;
  /**
   * Text label for the primary submit/confirmation button.
   * This button typically confirms the modal action or submits form data.
   * @default "OK"
   */
  submitButtonLabel?: string;
  /**
   * Text label for the cancel/dismiss button.
   * This button typically closes the modal without saving changes or performing actions.
   * @default "Cancel"
   */
  cancelButtonLabel?: string;
  /**
   * When true, disables the submit button preventing user interaction.
   * Useful when form validation fails or when an operation is in progress.
   * The button will appear visually disabled and won't respond to clicks.
   */
  disableSubmitButton?: boolean;
  /**
   * Controls whether the submit button click event should stop propagation.
   * When true, prevents the click event from bubbling up to parent elements.
   * @default true
   */
  stopPropagationSubmitButton?: boolean;
  /**
   * Callback function triggered when the submit button is clicked.
   * Receives the click event as a parameter for additional event handling.
   * Use this to handle form submission, data processing, or confirmation actions.
   */
  onSubmit?: (event: React.MouseEvent) => void;
  /**
   * When true, allows the title text to be edited inline by clicking on it.
   * The title becomes an input field that users can modify directly in the modal header.
   * Useful for renaming operations or title customization workflows.
   */
  isTitleEditable?: boolean;
  /**
   * Callback function triggered when the editable title text changes.
   * Only relevant when `isTitleEditable` is true. Receives the change event
   * which contains the new title value. Use this to update your title state.
   */
  onTitleChanged?: React.ChangeEventHandler<FormControlElement>;
  /**
   * Additional CSS classes to apply to the title input field.
   * Only used when `isTitleEditable` is true. Use this to customize
   * the appearance of the editable title input beyond default styling.
   */
  inputExtraClassNames?: string;
  /**
   * When true, hides the X close icon button in the modal header.
   * Users will only be able to close the modal using footer buttons or by clicking outside.
   * Useful when you want to force users to make an explicit choice via footer buttons.
   */
  hideCloseIcon?: boolean;
  /**
   * Size variant that controls the modal's width and maximum dimensions:
   * - `xs`: Extra small modal (280px max width)
   * - `sm`: Small modal (384px max width)
   * - `md`: Medium modal (448px max width)
   * - `lg`: Large modal (512px max width)
   * - `xl`: Extra large modal (576px max width)
   * - `2xl` through `6xl`: Progressively larger sizes up to full screen
   */
  size?: ModalSize;
  /**
   * When true, completely hides all default footer buttons (submit, cancel, custom).
   * The modal will only have header and body content. Useful when you provide
   * custom actions within the modal body or use a custom footer.
   */
  hideFooterButtons?: boolean;
  /**
   * When true, hides only the submit button while keeping other footer buttons visible.
   * Useful for information-only modals that don't require a confirmation action.
   */
  hideSubmitButton?: boolean;
  /**
   * When true, hides only the cancel button while keeping other footer buttons visible.
   * Useful for critical operations where cancellation should not be easily accessible.
   */
  hideCancelButton?: boolean;
  /**
   * Test ID attribute for the modal container element.
   * Used for automated testing to identify and interact with the modal.
   * Applied to the modal's root element for test targeting.
   */
  testId?: string;
  /**
   * Additional CSS classes to apply to the modal dialog container.
   * Use this to customize the modal's positioning, sizing, or appearance
   * beyond the built-in size variants and default styling.
   */
  dialogClassName?: string;
  /**
   * Placeholder text displayed in the title input when `isTitleEditable` is true.
   * Shows helpful text when the title field is empty, guiding users on what to enter.
   */
  titlePlaceholder?: string;
  /**
   * When true, makes the title field required when `isTitleEditable` is true.
   * Prevents submission or validation if the title is empty. Usually combined
   * with validation feedback and error handling.
   */
  titleRequired?: boolean;
  /**
   * Error message to display when the editable title has validation issues.
   * Only shown when `isTitleEditable` is true and there's a title validation error.
   * Provides user feedback about what needs to be corrected.
   */
  titleError?: string;
  /**
   * Tooltip text to display when hovering over the submit button.
   * Provides additional context or instructions about what the submit action will do.
   * Helpful for clarifying the button's purpose in complex workflows.
   */
  submitButtonTooltip?: string;
  /**
   * Tooltip text to display when hovering over the cancel button.
   * Can provide information about what happens when canceling or any data loss warnings.
   */
  cancelButtonTooltip?: string;
  /**
   * When true, disables the custom button preventing user interaction.
   * Only relevant when `customButton` is true. The button will appear
   * visually disabled and won't respond to clicks.
   */
  disableCustomButton?: boolean;
  /**
   * Custom header content that completely replaces the default modal header.
   * When provided, the default title, subtitle, and close button are not rendered.
   * Use this when you need complete control over the header layout and content.
   */
  customHeader?: React.ReactElement;
  /**
   * Content to display in the center area of the footer between buttons.
   * Useful for adding status messages, progress indicators, or additional
   * information that should be visible alongside the action buttons.
   */
  middleFooterSection?: React.ReactElement;
  /**
   * Visual style variant for the custom button when `customButton` is true.
   * Determines the button's appearance and color scheme. Uses the same
   * variants as the standard Button component (outline, theme, danger, etc.).
   */
  customButtonVariant?: ButtonVariant;
  /**
   * Controls whether focus should be trapped within the modal when open.
   * When true (default), focus cycles through modal elements only. Set to false
   * if you need to interact with elements outside the modal (like tooltips with inputs).
   * @default true
   */
  keepFocusInsideModal?: boolean;
  /**
   * Visual style variant for the submit button.
   * Determines the button's appearance and color scheme. Use 'theme' for primary
   * actions, 'danger' for destructive actions, or other variants as appropriate.
   */
  submitButtonVariant?: ButtonVariant;
  /**
   * ARIA attribute that references the ID of an element containing descriptive text for the modal.
   * This prop is passed to the modal dialog element as `aria-describedby` for accessibility purposes.
   */
  ariaDescribedBy?: string;
  /**
   * Callback function triggered when the user clicks/taps outside the modal dialog.
   * Receives the pointer event. Use this to customize outside-click behavior,
   * such as preventing closure in certain conditions or showing warnings.
   */
  onPointerDownOutside?: (e: Event) => void;
  /**
   * Callback function triggered when the user interacts outside the modal.
   * This includes clicks, taps, and other interactions outside the modal area.
   * More general than `onPointerDownOutside` and covers additional interaction types.
   */
  onInteractOutside?: (e: Event) => void;
};
//#endregion
export { ModalProps, ModalSize, TitleIconPosition };