"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;
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 _utils = require("../../utils");
var _breakout = require("../../utils/breakout");
var _excluded = ["children"];
var _templateObject, _templateObject2, _templateObject3;
/** @jsx jsx */
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.
 */
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.
 */
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.
 */
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 calcMaxWidth(layout, containerWidth) {
  switch (layout) {
    case 'wide':
      return (0, _breakout.calcWideWidth)(containerWidth);
    case 'full-width':
      return (0, _breakout.calcBreakoutWidth)(layout, containerWidth);
    default:
      return '100%';
  }
}
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 isImageAligned(layout) {
  switch (layout) {
    case 'align-end':
      return 'margin-right: 0';
    case 'align-start':
      return 'margin-left: 0';
    default:
      return '';
  }
}
/**
 * Can't use `.attrs` to handle highly dynamic styles because we are still
 * supporting `styled-components` v1.
 */
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;
  return (// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
    (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    /* For nested rich media items, set max-width to 100% */\n    tr &,\n    [data-layout-column] &,\n    [data-node-type='expand'] &,\n    [data-panel-type] &,\n    li & {\n      max-width: 100%;\n    }\n\n    width: ", ";\n    ", "\n    max-width: ", ";\n\n    ", "\n\n    &:not(.is-resizing) {\n      transition: width 100ms ease-in;\n    }\n\n    float: ", ";\n    margin: ", ";\n\n    &[class*='not-resizing'] {\n      ", "\n    }\n\n    ", ";\n  "])), isExtendedResizeExperienceOn ? "".concat(mediaSingleWidth || width, "px") : mediaSingleWidth ? calcResizedWidth(layout, width || 0, containerWidth) : calcLegacyWidth(layout, width || 0, containerWidth, fullWidthMode, isResized, isInsideOfInlineExtension), 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%'
    }), isExtendedResizeExperienceOn ? "".concat(containerWidth, "px") : calcMaxWidth(layout, containerWidth), 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    ", "\n  "])), 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  position: relative;\n\n  ", "\n\n  /* Editor */\n  & > figure {\n    position: ", ";\n    height: 100%;\n    width: 100%;\n  }\n\n  // Comments on media project adds comment badge as child of the media wrapper,\n  // thus we need to exclude it so that style is applied to intended div\n  & > div:not([data-comment-badge='true']) {\n    position: ", ";\n    height: 100%;\n    width: 100%;\n  }\n\n  & * [data-mark-annotation-type='inlineComment'] {\n    width: 100%;\n    height: 100%;\n  }\n\n  &[data-node-type='embedCard'] > div {\n    width: 100%;\n  }\n\n  /* Renderer */\n  [data-node-type='media'] {\n    position: static !important;\n\n    > div {\n      position: absolute;\n      height: 100%;\n    }\n  }\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 (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;
  return (0, _react2.jsx)("div", {
    style: {
      position: 'absolute',
      inset: '0px',
      border: "0.5px solid ".concat(borderColor),
      borderRadius: '1px'
    }
  });
};