import { TooltipComponentProps } from "../Tooltip/Tooltip.types.js";
import React from "react";

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

/**
 * Interface for individual action items within a SeeqActionDropdown.
 * Each item represents a clickable action with optional icon, text, and divider.
 */
type SeeqActionDropdownItems = {
  /**
   * 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 FontAwesome classes (e.g., 'fc-zoom', 'fc-delete').
   * Provides visual context for the action.
   */
  icon?: string;
  /**
   * Additional CSS classes to apply to the icon element.
   * Use this to customize icon appearance beyond standard styling.
   */
  iconExtraClassNames?: string;
  /**
   * Additional CSS classes to apply to the dropdown icon container.
   * Use this to customize the icon's appearance beyond default Seeq styling.
   */
  iconContainerExtraClassNames?: string;
  /**
   * Primary label for the dropdown item.
   * This is the primary content that users see and click on to trigger the action.
   */
  display: React.ReactNode;
  /**
   * Callback function triggered when the dropdown item is clicked.
   * Use this to define the specific action that should occur when users select this item.
   */
  action: (e?: Event) => void;
  /**
   * When true, the item is clickable and interactive.
   * When false, the item appears disabled and doesn't respond to clicks.
   * @default true
   */
  enabled?: boolean;
  /**
   * When true, displays a visual divider line below this dropdown item.
   * Useful for grouping related items or separating different sections of actions.
   */
  divider?: boolean;
  /**
   * Test ID attribute for the dropdown item used in automated testing.
   * Helps identify and interact with specific action items in test suites.
   */
  testId?: string;
  /**
   * Secondary descriptive text displayed below the main display text.
   * Provides additional context or explanation about what the action does.
   */
  text?: string;
  /**
   * When true, the item is rendered similar to the disabled state, but
   * still allows interaction, cursor changes, and hover states.
   */
  dim?: boolean;
};
/**
 * Props for the SeeqActionDropdown component that creates specialized Seeq-branded action menus.
 * Extends TooltipComponentProps to support tooltip functionality on the trigger.
 */
type SeeqActionDropdownProps = {
  /**
   * Array of action items to display in the dropdown menu.
   * Each item represents a specific action users can perform, with icons and descriptions.
   */
  seeqActionDropdownItems: SeeqActionDropdownItems[];
  /**
   * React element to use as the clickable trigger for the dropdown.
   * Typically a button, icon, or text element that users click to open the action menu.
   */
  trigger: React.ReactNode;
  /**
   * HTML ID attribute for the dropdown trigger element.
   * Should be unique across the page for proper HTML semantics and accessibility.
   */
  id?: string;
  /**
   * Additional CSS classes to apply to the dropdown container.
   * Use this to customize the dropdown's appearance beyond default Seeq styling.
   */
  extraClassNames?: 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;
  /**
   * When true, disables the dropdown trigger preventing user interaction.
   * Disabled triggers appear visually dimmed and don't open the dropdown when clicked.
   */
  disabled?: boolean;
  /**
   * Callback function triggered when the trigger is clicked.
   * Primarily used for tracking or analytics purposes. Note: this doesn't control
   * dropdown opening, which is handled separately.
   */
  onClick?: (e: MouseEvent) => void;
  /**
   * 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, automatically closes the dropdown when any content inside it is clicked.
   * Useful for action dropdowns where selecting an option should close the dropdown.
   */
  isCloseOnContentClick?: boolean;
  /**
   * When true, traps keyboard focus within the dropdown when it's open.
   * Prevents users from tabbing outside the dropdown, improving accessibility.
   */
  keepFocusInsideDropdown?: boolean;
  /**
   * Predefined variant that determines the dropdown's styling and behavior:
   * - `create-workbench`: For workbench creation actions
   * - `view-workbench`: For workbench viewing and management actions
   * - `insert-seeq-content`: For inserting Seeq-specific content and objects
   * Each variant has specific styling and may filter available actions.
   */
  variant: 'create-workbench' | 'view-workbench' | 'insert-seeq-content';
} & TooltipComponentProps;
//#endregion
export { SeeqActionDropdownItems, SeeqActionDropdownProps };