/* index.tsx generated by @compiled/babel-plugin v0.39.1 */
/* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
/* eslint-disable @atlaskit/ui-styling-standard/no-unsafe-values */
import "./index.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React from 'react';
import { di } from 'react-magnetic-di';
import { MediaPlacement, SmartLinkSize } from '../../../../constants';
import { useFlexibleUiContext } from '../../../../state/flexible-ui-context';
import { isFlexUiPreviewPresent } from '../../../../state/flexible-ui-context/utils';
import { isFlexibleUiBlock, isFlexibleUiPreviewBlock, isStyleCacheProvider } from '../../../../utils/flexible';
import { TitleBlock } from '../blocks';
import HoverCardControl from './hover-card-control';
import LayeredLink from './layered-link';
export const getChildrenOptions = (children, context) => {
  let options = {};
  if (isFlexUiPreviewPresent(context)) {
    React.Children.map(children, child => {
      if ( /*#__PURE__*/React.isValidElement(child)) {
        if (isFlexibleUiPreviewBlock(child)) {
          const {
            placement
          } = child.props;
          if (placement === MediaPlacement.Left) {
            options.previewOnLeft = true;
          }
          if (placement === MediaPlacement.Right) {
            options.previewOnRight = true;
          }
        }
      }
    });
  }
  return options;
};
const filterChildren = (children, removeBlockRestriction) => {
  if (removeBlockRestriction) {
    return children;
  }
  return React.Children.map(children, child => /*#__PURE__*/React.isValidElement(child) && isFlexibleUiBlock(child) ? child : undefined);
};

/**
 * Note: This function is only necessary for CompiledCSS within Jest tests due to the way it handles Styles.
 * CompiledCSS will inject a StyleCacheProvider around the component tree, which
 * causes the children to be wrapped in a StyleCacheProvider as well. This function recursively
 * searches for the first valid TitleBlock within the children of the StyleCacheProvider.
 */
export const getFlexibleUiBlock = node => {
  if (! /*#__PURE__*/React.isValidElement(node)) {
    return undefined;
  }
  if (node.type === TitleBlock) {
    return node;
  }
  if (isStyleCacheProvider(node)) {
    // Component wrapped with compiled at runtime, check for children
    let isChildrenValid;
    React.Children.map(node.props.children, child => {
      var _child$type;
      if (typeof child.type !== 'string' && ((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.name) !== 'Style') {
        isChildrenValid = getFlexibleUiBlock(child);
      }
    });
    return isChildrenValid;
  }
  return undefined;
};
const getTitleBlockProps = children => {
  const block = React.Children.toArray(children).map(child => getFlexibleUiBlock(child)).filter(x => x !== undefined).at(0);
  if ( /*#__PURE__*/React.isValidElement(block)) {
    return block.props;
  }
};
const getLayeredLink = (testId, context, children, onClick, onAuxClick, onContextMenu, title) => {
  const {
    linkTitle,
    url = ''
  } = context || {};
  // SSR cannot reliably extract TitleBlock props from children, so `title` is
  // provided from CardSSR as a stable server/client value to prevent hydration
  // text mismatches for the clickable container link.
  const {
    anchorTarget: target,
    text
  } = getTitleBlockProps(children) || {};
  return /*#__PURE__*/React.createElement(LayeredLink, {
    onClick: onClick,
    onAuxClick: onAuxClick,
    onContextMenu: onContextMenu,
    target: target,
    testId: testId,
    text: title || text || (linkTitle === null || linkTitle === void 0 ? void 0 : linkTitle.text),
    url: url
  });
};
const baseStyleCommon = null;
const backgroundStyles = null;
const elevationStyles = null;
const clickableContainerStyles = null;
const gapStyleMap = {
  xlarge: "_zulpr2fv",
  large: "_zulpzu5n",
  medium: "_zulp1bpf",
  small: "_zulpswc3"
};

/**
 * Get container padding based on smart link size
 * Equivalent version for DS primitives space token is getPrimitivesPaddingSpaceBySize()
 * at view/FlexibleCard/components/utils.tsx
 */
const getPadding = size => {
  switch (size) {
    case SmartLinkSize.XLarge:
      return "var(--ds-space-300, 24px)";
    case SmartLinkSize.Large:
      return "var(--ds-space-250, 20px)";
    case SmartLinkSize.Medium:
      return "var(--ds-space-200, 16px)";
    case SmartLinkSize.Small:
    default:
      return "var(--ds-space-100, 8px)";
  }
};
const getGap = size => {
  switch (size) {
    case SmartLinkSize.XLarge:
      return "var(--ds-space-250, 20px)";
    case SmartLinkSize.Large:
      return "var(--ds-space-200, 16px)";
    case SmartLinkSize.Medium:
      return "var(--ds-space-100, 8px)";
    case SmartLinkSize.Small:
    default:
      return "var(--ds-space-050, 4px)";
  }
};
const previewOnLeftStyleMap = {
  xlarge: "_19bver0k _y5vk1ejb",
  large: "_19bv16ru _y5vkv47k",
  medium: "_19bv1g7w _y5vk1eak",
  small: "_19bvlbes _y5vku2gc"
};
const previewOnRightStyleMap = {
  xlarge: "_u5f3er0k _1yob1ejb",
  large: "_u5f316ru _1yobv47k",
  medium: "_u5f31g7w _1yob1eak",
  small: "_u5f3lbes _1yobu2gc"
};

/**
 * A container is a hidden component that build the Flexible Smart Link.
 * All the Flexible UI components are wrapped inside the container.
 * It inherits the ui props from Card component and applies the custom styling
 * accordingly.
 * @internal
 * @see Block
 */
const Container = ({
  children,
  clickableContainer = false,
  hideBackground = false,
  hideElevation = false,
  hidePadding = false,
  onClick,
  onAuxClick,
  onContextMenu,
  retry,
  showHoverPreview = false,
  hoverPreviewOptions,
  actionOptions,
  removeBlockRestriction = false,
  size = SmartLinkSize.Medium,
  status,
  testId = 'smart-links-container',
  title
}) => {
  const padding = hidePadding ? '0px' : getPadding(size);
  const gap = getGap(size);
  const context = useFlexibleUiContext();
  const {
    previewOnLeft,
    previewOnRight
  } = getChildrenOptions(children, context);
  const isResolved = status === 'resolved';
  const isUnresolvedWithAuthFlow = status !== 'resolved' && retry !== undefined;
  const hasHoverCardOverride = (hoverPreviewOptions === null || hoverPreviewOptions === void 0 ? void 0 : hoverPreviewOptions.render) !== undefined;
  const canShowHoverCard = showHoverPreview && (isResolved || isUnresolvedWithAuthFlow || hasHoverCardOverride);
  const containerPaddingStyles = null;
  const container = /*#__PURE__*/React.createElement("div", {
    "data-smart-link-container": true,
    "data-testid": testId,
    className: ax(["_1e0c1txw _2lx21bp4 _1ul9idpf _1reo15vq _kqswh2mm _1pcmkb7n _1v7y1i6y _ufn21i6y", gapStyleMap[size], !hideBackground && "_bfhkhp5a", "_1yt418y6 _jb7v18y6 _y5vk167t _1yob1wow _r37x1r5k", previewOnLeft && previewOnLeftStyleMap[size], previewOnRight && previewOnRightStyleMap[size], !hideElevation && "_19itia51 _2rkopb1k _19pkv77o _2hwxv77o _otyrv77o _18u0v77o", clickableContainer && "_nqwih2mm _18ywh2mm _1nq3h2mm _1t4ckb7n _1nxdkb7n _xnbykb7n"]),
    style: {
      "--_1xumd0e": ix(padding),
      "--_73mooq": ix(previewOnLeft ? gap : padding),
      "--_12k13bg": ix(previewOnRight ? gap : padding)
    }
  }, clickableContainer ? getLayeredLink(testId, context, children, onClick, onAuxClick, onContextMenu, title) : null, filterChildren(children, removeBlockRestriction));
  if (context !== null && context !== void 0 && context.url && canShowHoverCard) {
    return /*#__PURE__*/React.createElement(HoverCardControl, {
      isHoverPreview: isResolved || hasHoverCardOverride,
      isAuthTooltip: isUnresolvedWithAuthFlow,
      actionOptions: actionOptions,
      testId: testId,
      url: context.url,
      hoverPreviewOptions: hoverPreviewOptions
    }, container);
  }
  return container;
};
export default Container;