import { TooltipComponentProps } from "../Tooltip/Tooltip.types.js";
import { ButtonProps } from "../Button/Button.types.js";
import { InputLengthStyleProps, TextFieldProps } from "../TextField/TextField.types.js";

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

/**
 * Interface for button elements that can be appended to an InputGroup.
 * Used when you want to add interactive buttons alongside the input field.
 */
type AppendedButtonProps = {
  /**
   * Specifies that this appended item is an interactive button.
   * Button items can trigger actions and provide additional functionality to the input.
   */
  variant: 'button';
  /**
   * Configuration properties for the button component.
   * Uses all standard Button props including click handlers, styling, icons, and tooltips.
   */
  buttonProps: ButtonProps;
};
/**
 * Interface for custom React elements that can be appended to an InputGroup.
 * Used when you need to add non-button content like icons, labels, or decorative elements.
 */
type ElementProps = {
  /**
   * Specifies that this appended item is a custom React element.
   * Element items are typically decorative or informational and don't have built-in interactivity.
   */
  variant: 'element';
  /**
   * The React content to render alongside the input field.
   * Can be any valid React node including text, icons, indicators, or complex components.
   */
  element: React.ReactNode;
};
type AppendedProps = AppendedButtonProps | ElementProps | undefined;
/**
 * Base interface for InputGroup component properties.
 * Extends TextFieldProps to inherit all text input functionality while adding group-specific features.
 */
type BaseInputGroupProps = {
  /**
   * Array of elements to append to the right side of the input field.
   * Each item can be either a button (for interactive functionality) or an element (for decoration).
   * Items are displayed in the order they appear in the array, creating a cohesive input group.
   */
  append: AppendedProps[];
  /**
   * Custom input field component to render instead of the default TextField.
   * Use this when you need specialized input behavior while maintaining the group styling.
   * The field will be integrated seamlessly with the appended elements.
   */
  field?: React.ReactNode;
} & TextFieldProps;
/**
 * Complete props interface for the InputGroup component.
 * Combines base input group functionality with tooltip support and text length constraints.
 * Creates a cohesive input control with attached buttons or decorative elements.
 */
type InputGroupProps = BaseInputGroupProps & TooltipComponentProps & InputLengthStyleProps;
//#endregion
export { AppendedProps, InputGroupProps };