"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.MediaWrapper = exports.MediaSingleDimensionHelper = exports.MediaBorderGapFiller = void 0;
exports.calcLegacyWidth = calcLegacyWidth;
exports.calcLegacyWidthForInline = calcLegacyWidthForInline;
exports.calcResizedWidth = calcResizedWidth;
exports.mediaWrapperStyle = void 0;
exports.roundToClosestEvenPxValue = roundToClosestEvenPxValue;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@emotion/react");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _utils = require("../../utils");
var _breakout = require("../../utils/breakout");
var _excluded = ["children"];
var _templateObject, _templateObject2, _templateObject3;
/* eslint-disable @atlaskit/ui-styling-standard/use-compiled -- Pre-existing lint debt surfaced by this mechanical type-import-only PR. */
/**
 * @jsxRuntime classic
 * @jsx jsx
 */
// 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
function float(layout) {
  switch (layout) {
    case 'wrap-right':
      return 'right';
    case 'wrap-left':
      return 'left';
    default:
      return 'none';
  }
}
function getWidthIfFullWidthMode(originalWidth, containerWidth, isInsideOfInlineExtension) {
  if (isInsideOfInlineExtension) {
    return originalWidth > _editorSharedStyles.akEditorFullWidthLayoutWidth ? "".concat(Math.min(containerWidth, _editorSharedStyles.akEditorFullWidthLayoutWidth), "px") : "".concat(originalWidth, "px");
  }
  return originalWidth > _editorSharedStyles.akEditorFullWidthLayoutWidth ? '100%' : "".concat(originalWidth, "px");
}
function getWidthIfDefaultMode(originalWidth, containerWidth, isInsideOfInlineExtension) {
  if (isInsideOfInlineExtension) {
    return originalWidth > _editorSharedStyles.akEditorFullPageMaxWidth ? "".concat(Math.min(containerWidth, _editorSharedStyles.akEditorDefaultLayoutWidth), "px") : "".concat(originalWidth, "px");
  }
  return originalWidth > _editorSharedStyles.akEditorFullPageMaxWidth ? '100%' : "".concat(originalWidth, "px");
}

/**
 * Calculates the image width for non-resized images.
 *
 * If an image has not been resized using the pctWidth attribute,
 * then an image in wide or full-width can not be wider than the image's
 * original width.
 * @param layout
 * @param width
 * @param containerWidth
 * @param fullWidthMode
 * @param isResized
 * @param isInsideOfInlineExtension
 * @example
 */
function calcLegacyWidth(layout, width) {
  var containerWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
  var fullWidthMode = arguments.length > 3 ? arguments[3] : undefined;
  var isResized = arguments.length > 4 ? arguments[4] : undefined;
  var isInsideOfInlineExtension = arguments.length > 5 ? arguments[5] : undefined;
  switch (layout) {
    case 'align-start':
    case 'align-end':
    case 'wrap-right':
    case 'wrap-left':
      return width > containerWidth / 2 ? 'calc(50% - 12px)' : "".concat(width, "px");
    case 'wide':
      return isInsideOfInlineExtension ? (0, _breakout.calcWideWidth)(containerWidth, Infinity, "".concat(containerWidth, "px")) : (0, _breakout.calcWideWidth)(containerWidth);
    case 'full-width':
      return (0, _breakout.calcBreakoutWidth)(layout, containerWidth);
    default:
      return isResized ? "".concat(width, "px") : fullWidthMode ? getWidthIfFullWidthMode(width, containerWidth, isInsideOfInlineExtension) : getWidthIfDefaultMode(width, containerWidth, isInsideOfInlineExtension);
  }
}

/**
 * Calculates the image width for non-resized images.
 *
 * If an image has not been resized using the pctWidth attribute,
 * then an image in wide or full-width can not be wider than the image's
 * original width.
 * @param layout
 * @param width
 * @param containerWidth
 * @param fullWidthMode
 * @param isResized
 * @example
 */
function calcLegacyWidthForInline(layout, width) {
  var containerWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
  var fullWidthMode = arguments.length > 3 ? arguments[3] : undefined;
  var isResized = arguments.length > 4 ? arguments[4] : undefined;
  switch (layout) {
    case 'align-start':
    case 'align-end':
    case 'wrap-right':
    case 'wrap-left':
      return width > containerWidth / 2 ? 'calc(50% - 12px)' : "".concat(width, "px");
    case 'wide':
      return (0, _breakout.calcWideWidth)(containerWidth, Infinity, "".concat(containerWidth, "px"));
    case 'full-width':
      return (0, _breakout.calcBreakoutWidth)(layout, containerWidth);
    default:
      return isResized ? "".concat(width, "px") : fullWidthMode ? getWidthIfFullWidthMode(width, containerWidth) : getWidthIfDefaultMode(width, containerWidth);
  }
}

/**
 * Calculates the image width for previously resized images.
 *
 * Wide and full-width images are always that size (960px and 100%); there is
 * no distinction between max-width and width.
 * @param layout
 * @param width
 * @param containerWidth
 * @example
 */
function calcResizedWidth(layout, width) {
  var containerWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
  switch (layout) {
    case 'wide':
      return (0, _breakout.calcWideWidth)(containerWidth);
    case 'full-width':
      return (0, _breakout.calcBreakoutWidth)(layout, containerWidth);
    default:
      return "".concat(width, "px");
  }
}
function calcMargin(layout) {
  switch (layout) {
    case 'wrap-right':
      return '12px auto 12px 12px';
    case 'wrap-left':
      return '12px 12px 12px auto';
    default:
      return '24px auto';
  }
}
function calcMaxCssForPercentageTypeMedia(layout) {
  switch (layout) {
    case 'wide':
      return "min(var(--ak-editor--breakout-wide-layout-width), var(--ak-editor-max-container-width))";
    case 'full-width':
      return "min(var(--ak-editor--full-width-layout-width), var(--ak-editor-max-container-width))";
    default:
      return 'var(--ak-editor-max-container-width)';
  }
}
function isImageAligned(layout) {
  switch (layout) {
    case 'align-end':
      return 'margin-right: 0';
    case 'align-start':
      return 'margin-left: 0';
    default:
      return '';
  }
}

/**
 * Reduces the given CSS width value to the next lowest even pixel value if the value is in px.
 * This is to mitigate subpixel rendering issues of embedded smart links.
 *
 * @param widthValue CSS width value to be rounded
 * @returns Reduced CSS width value where px value given, or otherwise the original value
 * @example
 */

// widthValue could be a string in px, rem or percentage, e.g. "800px", "100%", etc.
function roundToClosestEvenPxValue(widthValue) {
  try {
    if (widthValue.endsWith('px')) {
      var pxWidth = parseInt(widthValue.slice(0, -2));
      return "".concat(pxWidth - pxWidth % 2, "px");
    }
    return widthValue;
  } catch (_unused) {
    return widthValue;
  }
}
/**
 * Can't use `.attrs` to handle highly dynamic styles because we are still
 * supporting `styled-components` v1.
 * @param root0
 * @param root0.containerWidth
 * @param root0.fullWidthMode
 * @param root0.isResized
 * @param root0.layout
 * @param root0.mediaSingleWidth
 * @param root0.width
 * @param root0.isExtendedResizeExperienceOn
 * @param root0.isNestedNode
 * @param root0.isInsideOfInlineExtension
 * @param root0.isInRenderer
 * @example
 */
var MediaSingleDimensionHelper = exports.MediaSingleDimensionHelper = function MediaSingleDimensionHelper(_ref) {
  var _ref$containerWidth = _ref.containerWidth,
    containerWidth = _ref$containerWidth === void 0 ? 0 : _ref$containerWidth,
    fullWidthMode = _ref.fullWidthMode,
    isResized = _ref.isResized,
    layout = _ref.layout,
    mediaSingleWidth = _ref.mediaSingleWidth,
    width = _ref.width,
    isExtendedResizeExperienceOn = _ref.isExtendedResizeExperienceOn,
    _ref$isNestedNode = _ref.isNestedNode,
    isNestedNode = _ref$isNestedNode === void 0 ? false : _ref$isNestedNode,
    _ref$isInsideOfInline = _ref.isInsideOfInlineExtension,
    isInsideOfInlineExtension = _ref$isInsideOfInline === void 0 ? false : _ref$isInsideOfInline,
    _ref$isInRenderer = _ref.isInRenderer,
    isInRenderer = _ref$isInRenderer === void 0 ? false : _ref$isInRenderer;
  var calculatedWidth = roundToClosestEvenPxValue(isExtendedResizeExperienceOn ? "".concat(mediaSingleWidth || width, "px") : mediaSingleWidth ? calcResizedWidth(layout, width || 0, containerWidth) : calcLegacyWidth(layout, width || 0, containerWidth, fullWidthMode, isResized, isInsideOfInlineExtension));
  var cssMaxWidth = isExtendedResizeExperienceOn ? 'var(--ak-editor-max-container-width)' : calcMaxCssForPercentageTypeMedia(layout);

  // jest warning: JSDOM version (22) doesn't support the new @container CSS rule
  // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\t/* For nested rich media items, set max-width to 100% */\n\t\ttr &,\n\t\t[data-layout-column] &,\n\t\t[data-node-type='expand'] &,\n\t\t[data-panel-type] &,\n\t\tli &,\n\t\t[data-prosemirror-node-name='bodiedSyncBlock'] &,\n\t\t[data-prosemirror-node-name='syncBlock'] &,\n\t\t[data-sync-block-renderer] &,\n\t\t[data-bodied-sync-block] & {\n\t\t\tmax-width: 100%;\n\t\t}\n\n\t\twidth: ", ";\n\t\t", "\n\n\t\t", "\n\n\t\t", "\n\n\t\t&:not(.is-resizing) {\n\t\t\ttransition: width 100ms ease-in;\n\t\t}\n\n\t\tfloat: ", ";\n\t\tmargin: ", ";\n\n\t\t&[class*='not-resizing'] {\n\t\t\t", "\n\t\t}\n\n\t\t", ";\n\t"])), calculatedWidth, layout === 'full-width' &&
  /* This causes issues for new experience where we don't strip layout attributes
   when copying top-level node and pasting into a table/layout,
   because full-width layout will remain, causing node to be edge-to-edge */
  !isExtendedResizeExperienceOn && (0, _react2.css)({
    minWidth: '100%'
  }), isInRenderer ? (0, _react2.css)({
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-container-queries
    '@container ak-renderer-wrapper (min-width: 1px)': {
      maxWidth: '100cqw'
    }
  }) : "max-width: ".concat(cssMaxWidth, ";"), isExtendedResizeExperienceOn && "&[class*='is-resizing'] {\n    .new-file-experience-wrapper {\n      box-shadow: none !important;\n    }\n\n    ".concat(!isNestedNode && _utils.nonWrappedLayouts.includes(layout) && "margin-left: 50%;\n      transform: translateX(-50%);", "\n  }"), float(layout), calcMargin(layout), isNestedNode ? /* Make nested node appear responsive when resizing table cell */"max-width: 100%;" : _utils.nonWrappedLayouts.includes(layout) && "margin-left: 50%;\n        transform: translateX(-50%);", isImageAligned(layout));
};
var RenderFallbackContainer = function RenderFallbackContainer(_ref2) {
  var hasFallbackContainer = _ref2.hasFallbackContainer,
    paddingBottom = _ref2.paddingBottom,
    height = _ref2.height;
  return (// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
    (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t\t", "\n\t"])), hasFallbackContainer ? "\n  &::after {\n    content: '';\n    display: block;\n    ".concat(height ? "height: ".concat(height, "px;") : paddingBottom ? "padding-bottom: ".concat(paddingBottom, ";") : '', "\n\n    /* Fixes extra padding problem in Firefox */\n    font-size: 0;\n    line-height: 0;\n  }\n  ") : '')
  );
};

// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
var mediaWrapperStyle = exports.mediaWrapperStyle = function mediaWrapperStyle(props) {
  return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\tposition: relative;\n\n\t", "\n\n\t/* Editor */\n  & > figure {\n\t\tposition: ", ";\n\t\theight: 100%;\n\t\twidth: 100%;\n\t}\n\n\t/* Comments on media project adds comment badge as child of the media wrapper,\n\tthus we need to exclude it so that style is applied to intended div */\n\t& > div:not([data-media-badges='true']) {\n\t\tposition: ", ";\n\t\theight: 100%;\n\t\twidth: 100%;\n\t}\n\n\t& * [data-mark-annotation-type='inlineComment'] {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}\n\n\t&[data-node-type='embedCard'] > div {\n\t\twidth: 100%;\n\t}\n\n\t/* Renderer */\n\t[data-node-type='media'] {\n\t\tposition: static !important;\n\t\theight: auto !important;\n\n\t\t> div {\n\t\t\tposition: absolute;\n\t\t\theight: 100%;\n\t\t}\n\t}\n"])), RenderFallbackContainer(props), props.hasFallbackContainer ? 'absolute' : 'relative', props.hasFallbackContainer ? 'absolute' : 'relative');
};
var MediaWrapper = exports.MediaWrapper = function MediaWrapper(_ref3) {
  var children = _ref3.children,
    rest = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
  return (
    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
    (0, _react2.jsx)("div", {
      css: mediaWrapperStyle(rest)
    }, children)
  );
};
MediaWrapper.displayName = 'WrapperMediaSingle';

/*
  There was an issue with a small, intermittent white gap appearing between the images due to a small pixel difference in browser rendering.

  The solution implemented below was adapted from: https://stackoverflow.com/a/68885576
  It suggests adding an absolute div on top which matches the width and height and setting the border on that div.
*/

var MediaBorderGapFiller = exports.MediaBorderGapFiller = function MediaBorderGapFiller(_ref4) {
  var borderColor = _ref4.borderColor;
  // [FEATURE FLAG: platform_editor_media_border_radius_fix]
  // Fixes border radius to properly match image with 8px radius
  // To clean up: remove conditional, keep only flag-on behavior ('8px')
  var borderRadius = (0, _platformFeatureFlags.fg)('platform_editor_media_border_radius_fix') ? "var(--ds-radius-large, 8px)" : '1px'; // OLD BEHAVIOR (to be removed when flag is cleaned up)

  return (0, _react2.jsx)("div", {
    style: {
      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
      position: 'absolute',
      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
      inset: '0px',
      border: "0.5px solid ".concat(borderColor),
      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
      borderRadius: borderRadius
    }
  });
};