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

  // Depending on whenever Frame was given onClick or link itself we display span or anchor elements
  var Wrapper = isAnchor ? WrapperAnchor : WrapperSpan;
  return /*#__PURE__*/React.createElement(Wrapper, {
    href: link,
    withoutBackground: withoutBackground,
    isSelected: isSelected,
    isInteractive: isInteractive,
    tabIndex: isInteractive ? 0 : undefined,
    role: isInteractive ? 'button' : undefined,
    onClick: handleClick,
    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);
});