/* ExpandedFrame.tsx generated by @compiled/babel-plugin v0.39.1 */
import _extends from "@babel/runtime/helpers/extends";
import "./ExpandedFrame.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
// eslint-disable-next-line no-unused-vars

import Tooltip from '@atlaskit/tooltip';
import { useMouseDownEvent } from '../../../state/analytics/useLinkClicked';
import { handleClickCommon } from '../../common/utils';
import { className } from './styled';
const styles = {
  linkWrapper: "_zulpu2gc _kqswh2mm _1e0c1txw _2lx21bp4 _4t3ik5xz _ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvu2gc _uiztglyw _qc5o94zs _14mjpb1k _aetrb3bt _18postnw _15l2idpf _32rxidpf _1x88idpf _19doidpf _1hfk1j28 _1bqqidpf _u94kidpf _1ifiidpf",
  linkWrapperInheritDimensions: "_4t3i1osq",
  linkWrapperSelected: "_8x3u1yw3",
  linkWrapperBorderAndBackground: "_1tqzia51 _1hfkhp5a _1ifikb7n",
  linkWrapperInteractiveNotHidden: "_hcgvia51 _4tpuhp5a _x148kb7n",
  header: "_11c81qyo _zulp1b66 _1e0c1txw _4cvr1h6o _1bah1yb4 _4t3igktf _1pbykb7n",
  leftSection: "_zulp1b66 _1e0c1txw _4cvr1h6o _1ul9idpf",
  tooltipWrapper: "_1reo15vq _18m915vq",
  headerAnchor: "_11c81qyo _1reo15vq _18m915vq _1e0c1ule _1bto1l2s _o5721q9c _9oik1r31 _1bnxglyw _jf4cnqa1",
  headerIcon: "_11c81qyo _1bsb7vkz _4t3i7vkz",
  contentStyle: "_19itdlqj _2rkoy00x _1reo15vq _18m915vq _v56414au _bfhkhp5a _16jlkb7n _4t3i1osq _1pbykb7n",
  contentInteractiveActiveBorder: "_1jhm1tt7",
  contentOverflowAuto: "_1reo1wug _18m91wug"
};
export const ExpandedFrame = ({
  isPlaceholder = false,
  children,
  onClick,
  onAuxClick,
  onContextMenu,
  icon,
  text,
  isSelected,
  frameStyle = 'showOnHover',
  href,
  minWidth,
  maxWidth,
  testId = 'expanded-frame',
  inheritDimensions,
  allowScrollBar = false,
  setOverflow = true,
  CompetitorPrompt,
  onContentMouseEnter,
  onContentMouseLeave
}) => {
  const isInteractive = () => !isPlaceholder && (Boolean(href) || Boolean(onClick));
  const handleClick = event => handleClickCommon(event, onClick);
  const handleMouseDown = useMouseDownEvent();
  const CompetitorPromptComponent = CompetitorPrompt && href ? /*#__PURE__*/React.createElement(CompetitorPrompt, {
    sourceUrl: href,
    linkType: "embed"
  }) : null;
  const renderHeader = () => {
    return frameStyle !== 'hide' && /*#__PURE__*/React.createElement("div", {
      className: ax([styles.header, "embed-header"])
    }, /*#__PURE__*/React.createElement("div", {
      className: ax([styles.leftSection])
    }, /*#__PURE__*/React.createElement("div", {
      className: ax([styles.headerIcon])
    }, icon), /*#__PURE__*/React.createElement("div", {
      className: ax([styles.tooltipWrapper])
    }, !isPlaceholder && /*#__PURE__*/React.createElement(Tooltip, {
      content: text,
      hideTooltipOnMouseDown: true
    }, /*#__PURE__*/React.createElement("a", {
      href: href,
      onClick: handleClick,
      onAuxClick: onAuxClick,
      onContextMenu: onContextMenu,
      onMouseDown: handleMouseDown,
      className: ax([styles.headerAnchor])
    }, text)))), CompetitorPromptComponent);
  };
  const interactive = isInteractive();
  const showBackgroundAlways = frameStyle === 'show' || isSelected && frameStyle !== 'hide';
  const showBackgroundOnHover = interactive && frameStyle !== 'hide';
  const renderContent = () => {
    return /*#__PURE__*/React.createElement("div", {
      "data-testid": "embed-content-wrapper",
      // This fixes an issue with input fields in cross domain iframes (ie. databases and jira fields from different domains)
      // See: HOT-107830
      contentEditable: false,
      onMouseEnter: onContentMouseEnter,
      onMouseLeave: onContentMouseLeave,
      onFocus: onContentMouseEnter,
      onBlur: onContentMouseLeave,
      className: ax([styles.contentStyle, setOverflow && allowScrollBar && styles.contentOverflowAuto, interactive && !showBackgroundAlways && !showBackgroundOnHover && styles.contentInteractiveActiveBorder])
    }, children);
  };
  return /*#__PURE__*/React.createElement("div", _extends({
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
    className: ax([styles.linkWrapper, inheritDimensions && styles.linkWrapperInheritDimensions, isSelected && frameStyle !== 'hide' && styles.linkWrapperSelected, showBackgroundAlways && styles.linkWrapperBorderAndBackground, showBackgroundOnHover && !showBackgroundAlways && styles.linkWrapperInteractiveNotHidden, className]),
    style: {
      minWidth: minWidth ? `${minWidth}px` : '',
      maxWidth: maxWidth ? `${maxWidth}px` : ''
    },
    "data-testid": testId,
    "data-trello-do-not-use-override": testId
    // Due to limitations of testing library, we can't assert ::after
    ,
    "data-is-selected": isSelected
  }, (isPlaceholder || !href) && {
    'data-wrapper-type': 'default',
    'data-is-interactive': isInteractive()
  }), renderHeader(), renderContent());
};