// This file is copied to `packages/editor/editor-plugin-ai/src/ui/components/AtlassianIntelligenceToolbarButton/ToolbarButton/index.tsx`
// If you make any change here, copy it to above file as well
// and notify about the change in #team-fc-editor-ai-dev channel.
/** @jsx jsx */
import React, { useCallback } from 'react';
import { css, jsx } from '@emotion/react';
import { FabricChannel } from '@atlaskit/analytics-listeners';
import Tooltip from '@atlaskit/tooltip';
import { ACTION, ACTION_SUBJECT, EVENT_TYPE, TOOLBAR_ACTION_SUBJECT_ID } from '../../analytics';
import Button from './styles';
export const TOOLBAR_BUTTON = TOOLBAR_ACTION_SUBJECT_ID;
const buttonWrapper = css`
  display: flex;
  height: 100%;
`;
const ToolbarButton = /*#__PURE__*/React.forwardRef((props, ref) => {
  const {
    buttonId,
    testId,
    className = '',
    href,
    iconAfter,
    iconBefore,
    disabled,
    selected,
    spacing,
    target,
    children,
    hideTooltip,
    title,
    titlePosition = 'top',
    item,
    'aria-label': ariaLabel,
    'aria-haspopup': ariaHasPopup,
    'aria-expanded': ariaExpanded,
    'aria-pressed': ariaPressed,
    'aria-keyshortcuts': ariaKeyShortcuts,
    onClick,
    onKeyDown,
    onItemClick
  } = props;
  const handleClick = useCallback((event, analyticsEvent) => {
    if (disabled) {
      return;
    }
    if (buttonId) {
      analyticsEvent.update(payload => ({
        ...payload,
        action: ACTION.CLICKED,
        actionSubject: ACTION_SUBJECT.TOOLBAR_BUTTON,
        actionSubjectId: buttonId,
        eventType: EVENT_TYPE.UI
      })).fire(FabricChannel.editor);
    }
    if (onClick) {
      onClick(event);
    }
    if (item && onItemClick) {
      onItemClick(item);
    }
  }, [disabled, onClick, onItemClick, item, buttonId]);
  const id = buttonId ? `editor-toolbar__${buttonId}` : undefined;
  const button = jsx(Button, {
    id: id,
    ref: ref,
    appearance: "subtle",
    testId: testId,
    className: className,
    href: href,
    iconAfter: iconAfter,
    iconBefore: iconBefore,
    isDisabled: disabled,
    isSelected: selected,
    onClick: handleClick,
    spacing: spacing || 'default',
    target: target,
    shouldFitContainer: true,
    "aria-expanded": ariaExpanded,
    "aria-haspopup": ariaHasPopup,
    "aria-label": ariaLabel,
    "aria-pressed": ariaPressed,
    "aria-keyshortcuts": ariaKeyShortcuts,
    onKeyDown: onKeyDown
  }, children);
  if (!title) {
    return button;
  }
  const tooltipContent = !hideTooltip ? title : null;
  return jsx(Tooltip, {
    content: tooltipContent,
    hideTooltipOnClick: true,
    position: titlePosition
  }, jsx("div", {
    css: buttonWrapper
  }, button));
});
export default ToolbarButton;