import type {
  IconButtonProps,
  SxProps,
  Theme,
  TooltipProps,
} from '@mui/material'
import type { ReactNode } from 'react'

/**
 * Represents a single action in the toolbar
 */
export interface ToolbarAction {
  /** Unique identifier for the action */
  id: string
  /** Icon to display for the action */
  icon: ReactNode
  /** Label displayed in tooltip */
  label: string
  /** Callback when action is clicked */
  onClick: () => void
  /** Whether the action is disabled */
  disabled?: boolean
}

/**
 * Labels for toolbar UI elements
 */
export interface ToolbarActionsLabels {
  /** Tooltip for the trigger button */
  trigger?: string
  /** Tooltip for the close button */
  close?: string
}

/**
 * Props for the ToolbarActions component
 */
export interface ToolbarActionsProps {
  /**
   * Array of React elements (typically IconButtons) to display in the toolbar.
   * Elements with `data-toolbar-hidden` attribute are ignored when counting visible
   * actions and excluded from the collapsed preview (e.g., Dividers).
   */
  children: ReactNode[] | ReactNode
  /** Direction in which the toolbar expands */
  direction?: 'left' | 'right'
  /**
   * Number of visible actions to show in collapsed mode.
   * When undefined, shows all actions without overflow.
   */
  visibleCount?: number
  /** Custom labels for UI elements */
  labels?: ToolbarActionsLabels
  /** Custom styles for the root container */
  sx?: SxProps<Theme>
  /** Props passed to action IconButtons */
  IconButtonProps?: Omit<IconButtonProps, 'onClick' | 'disabled'>
  /** Props passed to Tooltips */
  TooltipProps?: Omit<TooltipProps, 'title' | 'children'>
}