import React, { forwardRef, useCallback } from 'react';
import { useMouseDownEvent } from '../../../state/analytics/useLinkClicked';
import { WrapperAnchor, WrapperSpan } from './styled';
export const Frame = /*#__PURE__*/forwardRef((props, ref) => {
  const {
    isSelected,
    children,
    onClick,
    onAuxClick,
    onContextMenu,
    link,
    viewType,
    withoutBackground,
    testId,
    className,
    isHovered,
    truncateInline
  } = props;
  const handleClick = useCallback(event => {
    if (onClick) {
      event.preventDefault();
      event.stopPropagation();
      onClick(event);
    }
  }, [onClick]);
  const handleKeyPress = useCallback(event => {
    if (event.key !== ' ' && event.key !== 'Enter') {
      return;
    }
    if (onClick) {
      event.preventDefault();
      event.stopPropagation();
      onClick(event);
    }
  }, [onClick]);
  const handleMouseDown = useMouseDownEvent();
  const isInteractive = Boolean(onClick);
  const isAnchor = Boolean(link || onClick);

  // Depending on whenever Frame was given onClick or link itself we display span or anchor elements
  const Wrapper = isAnchor ? WrapperAnchor : WrapperSpan;
  return /*#__PURE__*/React.createElement(Wrapper, {
    href: link,
    withoutBackground: withoutBackground,
    isSelected: isSelected,
    isInteractive: isInteractive,
    tabIndex: isInteractive && !link ? 0 : undefined,
    role: isInteractive && !link ? 'button' : undefined,
    onClick: handleClick,
    onAuxClick: onAuxClick,
    onContextMenu: onContextMenu,
    onMouseDown: handleMouseDown,
    onKeyPress: handleKeyPress,
    "data-testid": testId
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
    ,
    className: className,
    ref: ref,
    isHovered: isHovered,
    truncateInline: truncateInline,
    viewType: viewType
  }, children);
});