import { TooltipProps } from "../Tooltip/Tooltip.types.js";
import React, { MouseEvent } from "react";

//#region src/ToolbarButton/ToolbarButton.types.d.ts
declare const toolbarButtonVariants: readonly ['outline', 'theme', 'theme-light', 'warning', 'danger', 'no-border'];
type ToolbarButtonVariant = (typeof toolbarButtonVariants)[number];
/**
 * Props for the ToolbarButton component that creates toolbar-style buttons with optional popovers.
 * Designed for use in toolbars, action bars, and similar UI contexts.
 */
type ToolbarButtonProps = {
  /**
   * Primary icon class name to display on the button.
   * Typically uses FontAwesome classes (e.g., 'fc-zoom', 'fc-delete').
   * This is the main visual identifier for the button's function.
   */
  icon: string;
  /**
   * Secondary icon class name to display alongside the primary icon.
   * Useful for showing state indicators, badges, or additional context.
   */
  secondIcon?: string;
  /**
   * When true, forces the primary icon to render in a smaller size.
   * Overrides automatic sizing based on button variant or layout.
   */
  forceSmallIcon?: boolean;
  /**
   * Text label for the toolbar button.
   * Typically shown when the toolbar has sufficient width or in expanded states.
   * Helps users understand the button's function when icons alone aren't clear.
   */
  label?: string;
  /**
   * React content to display in an attached popover when the button is clicked.
   * Can be any React elements including forms, menus, or complex layouts.
   * When provided, the button becomes a popover trigger.
   */
  popoverContent?: React.ReactNode;
  /**
   * When true, renders the button in a compact, icon-only mode.
   * Hides the label even if provided and uses minimal padding for space-constrained layouts.
   */
  isSmall?: boolean;
  /**
   * HTML ID attribute for the toolbar button element.
   * Should be unique across the page for proper HTML semantics and accessibility.
   */
  id?: string;
  /**
   * Additional CSS classes to apply to the toolbar button container.
   * Use this to customize the button's appearance beyond the built-in variants.
   */
  extraClassNames?: string;
  /**
   * Test ID attribute for the toolbar button element used in automated testing.
   * Applied to the button element for test targeting and interaction.
   */
  testId?: string;
  /**
   * Text to display in the button's tooltip when hovering.
   * Provides additional context or instructions about the button's function.
   */
  tooltipText?: 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.
   */
  isHtmlTooltip?: boolean;
  /**
   * Test ID attribute specifically for the tooltip element used in automated testing.
   * Helps identify and interact with the tooltip separately from the button.
   */
  tooltipTestId?: string;
  /**
   * Configuration options for customizing tooltip behavior and appearance.
   * Omits the 'text' property since that's handled by the `tooltipText` prop.
   * Includes options like position, delay, and other tooltip-specific settings.
   */
  tooltipOptions?: Omit<TooltipProps, 'text'>;
  /**
   * When true, disables the toolbar button preventing user interaction.
   * Disabled buttons appear visually dimmed and don't respond to clicks or show popovers.
   */
  disabled?: boolean;
  /**
   * Callback function triggered when the toolbar button is clicked.
   * Primarily used for tracking, analytics, or additional click handling.
   * Note: this doesn't prevent popover opening if popoverContent is provided.
   */
  onClick?: (e: MouseEvent) => void;
  /**
   * When true, displays the button in an "active" or "pressed" visual state.
   * Useful for toggle buttons or indicating the current tool/mode in a toolbar.
   */
  isActive?: boolean;
  /**
   * Callback function triggered when an attached popover is hidden/closed.
   * Use this for cleanup, state management, or other hide-related side effects.
   */
  onHide?: () => void;
  /**
   * When true, displays a visual arrow on the button indicating it has a dropdown/popover.
   * Helps users understand that clicking will reveal additional options or content.
   */
  hasArrow?: boolean;
  /**
   * When true, treats the primary icon string as an SVG identifier instead of a font icon class.
   * Changes how the icon is rendered and styled within the component.
   */
  isPrimaryAnSvg?: boolean;
  /**
   * Additional CSS classes to apply specifically to the primary icon element.
   * Use this to customize the icon's appearance independently from the button container.
   */
  primaryIconExtraClassNames?: string;
  /** height for the icon */
  iconHeight?: number;
  /** width for the icon */
  iconWidth?: number;
  /** viewbox for the icon */
  primaryIconViewbox?: string;
  /**
   * Alignment of the popover relative to the trigger button.
   * 'start' aligns left edges (popover to the right), 'end' aligns right edges (popover to the left), 'center' centers it.
   */
  popoverAlign?: 'start' | 'end' | 'center';
};
//#endregion
export { ToolbarButtonProps, ToolbarButtonVariant, toolbarButtonVariants };