import { TooltipProps } from "../Tooltip/Tooltip.types.js";
import { IconType } from "../Icon/Icon.types.js";
import React from "react";

//#region src/Button/Button.types.d.ts
declare const buttonTypes: readonly ['button', 'reset', 'submit', 'link'];
declare const buttonSizes: readonly ['xs', 'sm', 'lg'];
declare const buttonVariants: readonly ['outline', 'theme', 'theme-light', 'warning', 'danger', 'no-border', 'navigation', 'navigation-selected'];
declare const iconPositions: string[];
type ButtonType = (typeof buttonTypes)[number];
type ButtonSize = (typeof buttonSizes)[number];
type ButtonVariant = (typeof buttonVariants)[number];
type IconPosition = (typeof iconPositions)[number];
type ButtonProps = {
  /**
   * Callback function triggered when the button is clicked.
   * Receives the mouse event as a parameter for additional event handling.
   * Use this to define the primary action the button should perform.
   */
  onClick?: (e: React.MouseEvent) => void;
  /**
   * The text, element, or content to display inside the button.
   * Can be a string for simple text, a translation key, or any React element/node
   * for more complex content like formatted text or inline elements.
   */
  label?: string | React.JSX.Element | React.ReactNode;
  /**
   * Visual style variant that determines the button's appearance and color scheme:
   * - `outline`: White background with border, suitable for secondary actions
   * - `theme`: Primary theme colors, typically for main call-to-action buttons
   * - `theme-light`: Lighter version of theme colors for subtle primary actions
   * - `warning`: Yellow/orange styling for caution-related actions
   * - `danger`: Red styling for destructive or critical actions
   * - `no-border`: Borderless styling for minimal, text-like buttons
   * - `navigation`: Borderless styling for navigation panel items
   * - `navigation-selected`: Selected styling for navigation panel items
   * @default 'outline'
   */
  variant?: ButtonVariant;
  /**
   * HTML button type attribute that determines the button's behavior in forms:
   * - `button`: Standard button with no special form behavior (default)
   * - `submit`: Submits the parent form when clicked
   * - `reset`: Resets the parent form fields to their initial values
   * - `link`: Behaves like a button but renders as button type for Firefox compatibility
   * @default 'button'
   */
  type?: ButtonType;
  /**
   * Size variant that controls the button's dimensions and text size:
   * - `sm`: Small button with compact padding and smaller text (default)
   * - `lg`: Large button with generous padding and larger text
   * @default 'sm'
   */
  size?: ButtonSize;
  /**
   * When true, disables the button preventing user interaction.
   * Disabled buttons are visually dimmed and do not respond to clicks or focus.
   * The button will also have `pointer-events: none` applied via CSS.
   */
  disabled?: boolean;
  /**
   * When true, renders a loading indicator in the icon slot instead of the configured icon.
   * This keeps loading button treatment consistent across consumers.
   */
  inProgress?: boolean;
  /**
   * Additional CSS classes to apply to the button element.
   * These classes are combined with the component's built-in styling classes.
   * Use this to customize appearance beyond the standard variants.
   */
  extraClassNames?: string;
  /**
   * Icon class name to display alongside the button text.
   * Typically uses FontAwesome classes (e.g., 'fc-zoom', 'fc-delete').
   * The icon is automatically styled to match the button's text color.
   */
  icon?: string;
  /**
   * Determines how the icon should be styled and colored:
   * - `text`: Uses the button's text color (default)
   * - `white`: Forces white color regardless of button variant
   * - `theme`: Uses theme-specific colors
   * - `color`: Uses a custom color specified in `iconColor`
   * @default 'text'
   */
  iconStyle?: IconType;
  /**
   * Custom color for the icon when `iconStyle` is set to 'color'.
   * Can be any valid CSS color value (hex, rgb, color name, etc.).
   * This property is required when iconStyle is 'color'.
   */
  iconColor?: string;
  /**
   * Position of the icon relative to the button text:
   * - `left`: Icon appears before the text with right margin
   * - `right`: Icon appears after the text with left margin
   * @default 'left'
   */
  iconPosition?: IconPosition;
  /**
   * Custom prefix for the icon class when not using standard FontAwesome icons.
   * By default, icons are prefixed with 'fa-sharp fa-regular', but some icons
   * require different prefixes. Use this to override the default behavior.
   */
  iconPrefix?: string;
  /**
   * HTML ID attribute for the button element.
   * Should be unique across the entire page for proper HTML semantics.
   * Also used as a prefix for the icon's test ID when an icon is present.
   */
  id?: string;
  /**
   * Test ID attribute for the button element used in automated testing.
   * Applied to the `data-testid` attribute for element selection in test suites.
   */
  testId?: string;
  /**
   * Controls whether the click event should stop propagation to parent elements.
   * When true (default), prevents the click from bubbling up the DOM tree.
   * Set to false if you need parent elements to also handle the click event.
   * @default true
   */
  stopPropagation?: boolean;
  /**
   * Tooltip text to display when hovering over the button.
   * When provided, the button will show a tooltip with this text on hover.
   * The tooltip appearance and behavior can be customized with `tooltipOptions`.
   */
  tooltip?: string;
  /**
   * When true, the tooltip text is rendered as HTML allowing for rich content.
   * When false (default), the tooltip text is treated as plain text for security.
   * Only set to true if you trust the tooltip content source.
   * @default false
   */
  isHtmlTooltip?: boolean;
  /**
   * Test ID attribute specifically for the tooltip element.
   * Used for automated testing to identify and interact with the tooltip.
   * Helpful when you need to test tooltip-specific behavior separately from the button.
   */
  tooltipTestId?: string;
  /**
   * Configuration options for customizing tooltip behavior and appearance.
   * Omits the 'text' property since that's handled by the `tooltip` prop.
   * Includes options like position, delay, and other tooltip-specific settings.
   */
  tooltipOptions?: Omit<TooltipProps, 'text'>;
  /**
   * When true, prevents the blur event from occurring on mouse down.
   * Useful when you want to keep focus on the current element after clicking the button.
   * Commonly used in scenarios where button clicks shouldn't interrupt form input focus.
   * @default false
   */
  preventBlur?: boolean;
};
//#endregion
export { ButtonProps, ButtonSize, ButtonType, ButtonVariant, IconPosition, buttonSizes, buttonTypes, buttonVariants, iconPositions };