import { TooltipComponentProps } from "../Tooltip/Tooltip.types.js";
import { ButtonProps } from "../Button/Button.types.js";

//#region src/ButtonWithDropdown/ButtonWithDropdown.types.d.ts

/**
 * Interface for sub-menu items that appear in nested dropdown menus.
 * Used to create hierarchical menu structures within dropdown items.
 */
type DropdownSubItem = {
  /**
   * Icon class name to display next to the sub-item label.
   * Typically uses FontAwesome classes (e.g., 'fc-zoom', 'fc-delete').
   * Optional visual enhancement for better user recognition.
   */
  iconClass?: string;
  /**
   * Text label for the dropdown sub-item.
   * This is the clickable text that users will see and interact with.
   */
  label: string;
  /**
   * Callback function triggered when the sub-item is clicked.
   * Use this to define the action that should occur when users select this sub-item.
   */
  onClick?: (e?: Event) => void;
  /**
   * When true, disables the sub-item preventing user interaction.
   * Disabled items appear visually dimmed and don't respond to clicks.
   */
  disabled?: boolean;
  /**
   * Tooltip text to display when hovering over the sub-item.
   * Provides additional context or information about the sub-item's action.
   */
  tooltip?: string;
};
/**
 * Interface for main dropdown menu items that can contain sub-menus.
 * Extends TooltipComponentProps for enhanced tooltip functionality.
 */
type DropdownItems = {
  /**
   * HTML ID attribute for the dropdown item element.
   * Should be unique for proper HTML semantics and accessibility.
   */
  id?: string;
  /**
   * Icon class name to display next to the item label.
   * Typically uses Seeq or FontAwesome classes for consistent visual styling.
   */
  icon?: string;
  /**
   * When true, renders a loading indicator in the icon slot instead of the configured icon.
   * This keeps loading dropdown item treatment consistent across consumers.
   */
  inProgress?: boolean;
  /**
   * Type/style of the icon that determines its rendering and colors.
   * Common values include 'theme', 'text', 'color' based on the Icon component.
   */
  iconType?: string;
  /**
   * Custom color for the icon when using color-type icons.
   * Can be any valid CSS color value (hex, rgb, color names).
   */
  iconColor?: string;
  /**
   * Custom HTML ID attribute specifically for the icon element.
   * Useful for targeting the icon separately from the item container.
   */
  iconCustomId?: string;
  /**
   * Additional CSS classes to apply to the icon element.
   * Use this to customize icon appearance beyond standard styling.
   */
  iconExtraClassNames?: string;
  /**
   * Content to display as the item label.
   * Can be simple text or any React element for rich content like formatted text or badges.
   */
  label: string | React.ReactNode;
  /**
   * Custom HTML ID attribute specifically for the label element.
   * Useful for accessibility or when you need to target the label separately.
   */
  labelCustomId?: string;
  /**
   * When true, treats this item as a non-interactive label/header.
   * Label items typically appear different visually and don't trigger onClick events.
   */
  isLabel?: boolean;
  /**
   * Callback function triggered when the dropdown item is clicked.
   * Required for interactive items. Use this to define the primary action for the item.
   */
  onClick: (e?: Event) => void;
  /**
   * Additional CSS classes to apply to the label element.
   * Use this to customize label appearance, typography, or spacing.
   */
  labelClasses?: string;
  /**
   * When true, disables this dropdown item preventing user interaction.
   * Disabled items appear visually dimmed and don't respond to clicks.
   */
  disabled?: boolean;
  /**
   * Custom HTML ID attribute for the entire dropdown item container.
   * Useful for unique identification and accessibility purposes.
   */
  itemCustomId?: string;
  /**
   * Additional CSS classes to apply to the dropdown item container.
   * Use this to customize item appearance, spacing, or hover effects.
   */
  itemExtraClassNames?: string;
  /**
   * Test ID attribute for the label element used in automated testing.
   * Helps identify and interact with specific dropdown item labels in tests.
   */
  labelTestId?: string;
  /**
   * Test ID attribute for the icon element used in automated testing.
   * Helps identify and interact with specific dropdown item icons in tests.
   */
  iconTestId?: string;
  /**
   * When true, displays a visual divider line below this dropdown item.
   * Useful for grouping related items or separating different sections of the menu.
   */
  hasDivider?: boolean;
  /**
   * Test ID attribute for the dropdown item container used in automated testing.
   * Helps identify and interact with specific dropdown items in test suites.
   */
  testId?: string;
  /**
   * Array of sub-menu items that appear when this item is hovered or clicked.
   * Creates hierarchical dropdown menus for organizing related actions.
   */
  subMenuItems?: DropdownSubItem[];
} & TooltipComponentProps;
/**
 * Props for the ButtonWithDropdown component that creates a Qomponents-styled Button
 * with an attached dropdown menu.
 *
 * Unlike TriggerWithDropdown, this component does not allow a custom trigger element.
 * The trigger is always a Qomponents-styled Button whose appearance can be configured
 * via the button-related props (label, variant, size, icon, etc.).
 *
 * Uses the asChild prop on DropdownMenu.Trigger to avoid nesting <button> elements.
 */
type ButtonWithDropdownProps = TooltipComponentProps & ButtonProps & DropdownProps;
type DropdownProps = {
  children?: React.ReactNode;
  /**
   * Array of items to display in the dropdown menu.
   * Each item can be interactive (with onClick) or decorative (labels/dividers).
   * Items can also contain sub-menus for hierarchical organization.
   */
  dropdownItems: DropdownItems[];
  /**
   * HTML ID attribute for the dropdown trigger element.
   * Should be unique across the page for proper HTML semantics and accessibility.
   */
  id?: string;
  /**
   * Test ID attribute for the dropdown container element used in automated testing.
   * Applied to the main container that wraps both trigger and dropdown content.
   */
  containerTestId?: string;
  /**
   * Additional CSS classes to apply to the dropdown content container.
   * Use this to customize the dropdown menu's appearance, spacing, or styling.
   */
  contentExtraClassNames?: string;
  /**
   * Horizontal alignment of the dropdown content relative to the trigger:
   * - `start`: Aligns to the left edge of the trigger
   * - `center`: Centers the dropdown on the trigger
   * - `end`: Aligns to the right edge of the trigger
   */
  align?: 'start' | 'center' | 'end';
  /**
   * Numeric offset in pixels from the aligned position.
   * Positive values move the dropdown further from the trigger in the align direction.
   */
  alignOffset?: number;
  /**
   * Position of the dropdown relative to the trigger element:
   * - `top`: Dropdown appears above the trigger
   * - `bottom`: Dropdown appears below the trigger
   * - `left`: Dropdown appears to the left of the trigger
   * - `right`: Dropdown appears to the right of the trigger
   */
  placement?: 'top' | 'bottom' | 'left' | 'right';
  /**
   * Numeric offset in pixels from the placement position.
   * Positive values move the dropdown further away from the trigger.
   */
  placementOffset?: number;
  /**
   * When true, displays a visual arrow pointing from the dropdown to the trigger.
   * Helps users understand the relationship between trigger and dropdown content.
   */
  hasArrow?: boolean;
  /**
   * Controls whether the dropdown is currently open and visible.
   * Use this for controlled dropdown behavior where you manage open state externally.
   */
  isOpen?: boolean;
  /**
   * Callback function triggered when the dropdown open state changes.
   * Receives the new open state as a boolean parameter. Use this to sync with external state.
   */
  onOpenChange?: (isOpen: boolean) => void;
  /**
   * When true, automatically focuses the trigger button when the dropdown closes.
   * Improves keyboard navigation and accessibility by returning focus to the trigger.
   */
  setFocusOnTriggerOnClose?: boolean;
  /**
   * When true, traps keyboard focus within the dropdown when it's open.
   * Prevents users from tabbing outside the dropdown, improving accessibility.
   */
  keepFocusInsideDropdown?: boolean;
  /**
   * Callback function triggered when the dropdown container is clicked.
   * Receives the click event. Use this for handling container-level interactions.
   */
  onContainerClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
};
//#endregion
export { ButtonWithDropdownProps, DropdownItems, DropdownProps, DropdownSubItem };