/**
 * @file ToolbarButton.tsx - Toolbar button component for use with DataTable.
 * Also serves as a simple Bootstrap 5 button wrapper component.
 */

import type { ButtonVariant } from 'react-bootstrap/types';
import type { FC, MouseEventHandler } from 'react';
import { Icon, type IconName } from './Icon.tsx';
import { Button, OverlayTrigger, Tooltip } from 'react-bootstrap';

/**
 * Props for the ToolbarButton component.
 */
interface ToolbarButtonProps {
  /**
   * Optional tooltip configuration.
   * When provided, the button will show a tooltip on hover.
   */
  tooltip?: {
    /**
     * Whether to use fixed positioning for the tooltip.
     * Useful when the button is inside a scrollable container.
     */
    fixed: boolean;

    /**
     * Whether the tooltip should be displayed.
     * Allows conditional tooltip visibility.
     */
    display: boolean;

    /**
     * The text content of the tooltip.
     */
    text: string;
  };

  /**
   * Bootstrap button variant (color scheme).
   *
   * @default 'primary'
   */
  variant?: ButtonVariant;

  /**
   * Whether the button is disabled.
   * When disabled, pointer events are also disabled to prevent hover effects.
   */
  disabled?: boolean;

  /**
   * Click event handler for the button.
   */
  onClick?: MouseEventHandler<HTMLButtonElement>;

  /**
   * Name of the Bootstrap icon to display.
   * Icons are from react-bootstrap-icons.
   *
   * @see https://icons.getbootstrap.com/
   */
  iconName: IconName;

  /**
   * Text label displayed next to the icon.
   */
  text: string;
}

/**
 * A Bootstrap-styled toolbar button component with an icon and text.
 *
 * Designed for use with the DataTable component's toolbarButtons prop,
 * but can be used anywhere a button with an icon is needed.
 *
 * Features:
 * - Bootstrap icon support via react-bootstrap-icons
 * - Optional tooltip with configurable positioning
 * - All standard Bootstrap button variants
 * - Proper disabled state handling
 *
 * @example
 * ```tsx
 * // Basic usage
 * <ToolbarButton
 *   iconName="Plus"
 *   text="Add New"
 *   onClick={() => handleAdd()}
 * />
 *
 * // With tooltip
 * <ToolbarButton
 *   iconName="Trash"
 *   text="Delete"
 *   variant="danger"
 *   tooltip={{
 *     fixed: true,
 *     display: true,
 *     text: "Delete selected items"
 *   }}
 *   onClick={() => handleDelete()}
 * />
 *
 * // Disabled state
 * <ToolbarButton
 *   iconName="PencilSquare"
 *   text="Edit"
 *   disabled={!hasSelection}
 *   onClick={() => handleEdit()}
 * />
 *
 * // With DataTable
 * <DataTable
 *   columns={columns}
 *   data={data}
 *   toolbarButtons={{
 *     left: [
 *       <ToolbarButton key="add" iconName="Plus" text="Add" onClick={handleAdd} />,
 *       <ToolbarButton key="refresh" iconName="ArrowClockwise" text="Refresh" onClick={handleRefresh} />,
 *     ],
 *     right: [
 *       <ToolbarButton key="export" iconName="Download" text="Export" variant="outline-primary" />,
 *     ],
 *   }}
 * />
 * ```
 */
export const ToolbarButton: FC<ToolbarButtonProps> = ({
  tooltip,
  variant = 'primary',
  disabled,
  onClick,
  iconName,
  text,
}) => {
  // Create the base button element
  const button = (
    <Button
      variant={variant}
      disabled={disabled}
      // Disable pointer events when disabled to prevent hover effects on tooltips
      style={disabled ? { pointerEvents: 'none' } : undefined}
      onClick={onClick}
    >
      {/* Flexbox container for icon and text alignment */}
      <div className={'d-flex justify-content-center align-items-center'}>
        <Icon iconName={iconName} size={20} />
        <span className={'ms-2'}>{text}</span>
      </div>
    </Button>
  );

  // Return button without tooltip wrapper if no tooltip configured
  if (!tooltip) {
    return button;
  } else {
    // Wrap button with tooltip overlay
    return (
      <OverlayTrigger
        placement={'top'}
        overlay={
          <Tooltip
            // Apply fixed positioning and visibility based on tooltip config
            className={`${tooltip.fixed ? 'position-fixed' : ''} ${tooltip.display ? '' : 'd-none'}`}
          >
            {tooltip.text}
          </Tooltip>
        }
      >
        {/* Span wrapper needed for tooltip to work with disabled buttons */}
        <span className={'d-inline-block'}>{button}</span>
      </OverlayTrigger>
    );
  }
};
