import _extends from "@babel/runtime/helpers/extends";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
/**
 * @jsxRuntime classic
 * @jsx jsx
 */
import React from 'react';

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic
import { jsx } from '@emotion/react';
import classnames from 'classnames';
import { akEditorMediaResizeHandlerPaddingWide, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
import { fg } from '@atlaskit/platform-feature-flags';
import { VcMediaWrapperProps } from '@atlaskit/react-ufo/vc-media';
import { MEDIA_SINGLE_GUTTER_SIZE } from '../../media-single/constants';
import { getMediaSinglePixelWidth } from '../../media-single/utils';
import { shouldAddDefaultWrappedWidth } from '../../utils/rich-media-utils';
import { MediaSingleDimensionHelper, MediaWrapper } from './styled';
/**
 * MediaSingle
 * @param root0
 * @param root0.layout
 * @param root0.width
 * @param root0.height
 * @param root0.containerWidth
 * @param root0.isLoading
 * @param root0.pctWidth
 * @param root0.size
 * @param root0.className
 * @param root0.children
 * @param root0.nodeType
 * @param root0.fullWidthMode
 * @param root0.lineLength
 * @param root0.hasFallbackContainer
 * @param root0.handleMediaSingleRef
 * @param root0.isInsideOfInlineExtension
 * @param root0.dataAttributes
 * @param root0.isInRenderer
 * @example
 */
export default function MediaSingle(_ref) {
  var layout = _ref.layout,
    width = _ref.width,
    height = _ref.height,
    _ref$containerWidth = _ref.containerWidth,
    containerWidth = _ref$containerWidth === void 0 ? width : _ref$containerWidth,
    _ref$isLoading = _ref.isLoading,
    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
    pctWidth = _ref.pctWidth,
    size = _ref.size,
    className = _ref.className,
    propsChildren = _ref.children,
    _ref$nodeType = _ref.nodeType,
    nodeType = _ref$nodeType === void 0 ? 'mediaSingle' : _ref$nodeType,
    fullWidthMode = _ref.fullWidthMode,
    editorWidth = _ref.lineLength,
    _ref$hasFallbackConta = _ref.hasFallbackContainer,
    hasFallbackContainer = _ref$hasFallbackConta === void 0 ? true : _ref$hasFallbackConta,
    handleMediaSingleRef = _ref.handleMediaSingleRef,
    _ref$isInsideOfInline = _ref.isInsideOfInlineExtension,
    isInsideOfInlineExtension = _ref$isInsideOfInline === void 0 ? false : _ref$isInsideOfInline,
    dataAttributes = _ref.dataAttributes,
    _ref$isInRenderer = _ref.isInRenderer,
    isInRenderer = _ref$isInRenderer === void 0 ? false : _ref$isInRenderer;
  var isPixelWidth = (size === null || size === void 0 ? void 0 : size.widthType) === 'pixel';
  var mediaSingleWidth = (size === null || size === void 0 ? void 0 : size.width) || pctWidth;
  var children = React.Children.toArray(propsChildren);
  if (!mediaSingleWidth && shouldAddDefaultWrappedWidth(layout, width, editorWidth)) {
    // if width is not available, set to half of editor width
    mediaSingleWidth = isPixelWidth ? editorWidth / 2 : 50;
  }
  // When width is not set we have an absolute height for a given embed.
  // When both width and height are set we use them to determine ratio and use that to define
  // embed height in relation to whatever width of an dom element is in runtime.
  var isHeightOnly = width === undefined;
  if (mediaSingleWidth) {
    var pxWidth = getMediaSinglePixelWidth(mediaSingleWidth, editorWidth, size === null || size === void 0 ? void 0 : size.widthType, MEDIA_SINGLE_GUTTER_SIZE);
    if (isHeightOnly) {
      width = pxWidth - akEditorMediaResizeHandlerPaddingWide;
    } else if (width !== undefined) {
      height = height / width * pxWidth;
      width = pxWidth;
    }
  } else if (isHeightOnly) {
    // No mediaSingleWidth can be found on already existing pages with existing embeds

    // It's ok to use Embed specific width, because width can be not set only in embed card.
    // This value will be used only in the case of non `wide` and non `full-width` cases inside MediaSingleDimensionHelper.
    width = DEFAULT_EMBED_CARD_WIDTH - akEditorMediaResizeHandlerPaddingWide;
  }

  // Media wrapper controls the height of the box.
  // We can define this height
  // - via height directly
  // - via paddingBottom (if we have both height and width) which is a css trick to represent a ratio
  var mediaWrapperHeight;
  var paddingBottom;
  if (isHeightOnly) {
    mediaWrapperHeight = height;
  } else if (width !== undefined) {
    var mediaWrapperRatio = height / width * 100;
    paddingBottom = "".concat(mediaWrapperRatio.toFixed(3), "%");
    if (nodeType === 'embedCard') {
      // we want to set ratio of whole box (including header) buy knowing ratio of iframe itself

      // For some reason importing `embedHeaderHeight` from '@atlaskit/smart-card' breaks
      // packages/editor/editor-core/src/plugins/table/__tests__/unit/toolbar.ts 🤷‍️, but we have a test
      // that uses imported value, so it's should be good.
      paddingBottom = "calc(".concat(paddingBottom, " + 32px)");
    }
  }
  var _children = _slicedToArray(children, 2),
    media = _children[0],
    caption = _children[1];
  return jsx("div", _extends({
    ref: handleMediaSingleRef
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
    ,
    css: MediaSingleDimensionHelper({
      width: width,
      layout: layout,
      containerWidth: containerWidth,
      mediaSingleWidth: mediaSingleWidth,
      fullWidthMode: fullWidthMode,
      isExtendedResizeExperienceOn: isPixelWidth,
      isInsideOfInlineExtension: isInsideOfInlineExtension,
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
      isInRenderer: isInRenderer && fg('media-perf-uplift-mutation-fix')
    })
    // eslint-disable-next-line react/jsx-props-no-spreading, @atlaskit/platform/no-preconditioning
  }, !fg('platform_editor_fix_media_in_renderer') ? {} : {
    'data-layout': layout
  }, {
    "data-width": mediaSingleWidth,
    "data-width-type": (size === null || size === void 0 ? void 0 : size.widthType) || 'percentage',
    "data-node-type": nodeType,
    "data-vc": "media-single"
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
    ,
    className: classnames('rich-media-item mediaSingleView-content-wrap', "image-".concat(layout), className, {
      'is-loading': isLoading,
      'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
    })
    // Ignored via go/ees005
    // eslint-disable-next-line react/jsx-props-no-spreading
  }, dataAttributes, VcMediaWrapperProps), jsx(MediaWrapper, {
    hasFallbackContainer: hasFallbackContainer,
    height: mediaWrapperHeight,
    paddingBottom: paddingBottom
  }, media), caption);
}