"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CommentBadge = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = require("react");
var _react2 = require("@emotion/react");
var _debounce = _interopRequireDefault(require("lodash/debounce"));
var _button = require("@atlaskit/button");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _comment = _interopRequireDefault(require("@atlaskit/icon/glyph/comment"));
var _constants = require("@atlaskit/theme/constants");
var _media = require("../media");
/** @jsx jsx */

var commentBadgeWrapper = (0, _react2.css)({
  position: 'absolute',
  // closest parent element with position relative is .resizer-hover-zone, which includes 10px padding
  right: '2px',
  top: '2px',
  borderRadius: '3px',
  zIndex: _editorSharedStyles.akEditorUnitZIndex * 10
});
var commentBadgeEditorOverrides = (0, _react2.css)({
  right: '14px',
  zIndex: _constants.layers.card()
});
var getBadgeSize = function getBadgeSize(width, height) {
  // width is the original width of image, not resized or currently rendered to user. Defaulting to medium for now
  return width && width < 70 || height && height < 70 ? 'small' : 'medium';
};
var CommentBadge = exports.CommentBadge = function CommentBadge(_ref) {
  var intl = _ref.intl,
    width = _ref.width,
    height = _ref.height,
    mediaElement = _ref.mediaElement,
    onClick = _ref.onClick,
    _ref$isEditor = _ref.isEditor,
    isEditor = _ref$isEditor === void 0 ? false : _ref$isEditor;
  var _useState = (0, _react.useState)(getBadgeSize(width, height)),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    badgeSize = _useState2[0],
    setBadgeSize = _useState2[1];
  var title = intl.formatMessage(_media.commentMessages.viewAndAddCommentsOnMedia);
  (0, _react.useEffect)(function () {
    var observer = new ResizeObserver((0, _debounce.default)(function (entries) {
      var _entries = (0, _slicedToArray2.default)(entries, 1),
        entry = _entries[0];
      var _entry$contentRect = entry.contentRect,
        width = _entry$contentRect.width,
        height = _entry$contentRect.height;
      setBadgeSize(getBadgeSize(width, height));
    }));
    if (mediaElement) {
      observer.observe(mediaElement);
    }
    return function () {
      observer.disconnect();
    };
  }, [mediaElement]);
  var badgeDimensions = badgeSize === 'medium' ? '24px' : '16px';
  return (0, _react2.jsx)("div", {
    css: isEditor ? [commentBadgeWrapper, commentBadgeEditorOverrides] : commentBadgeWrapper
  }, (0, _react2.jsx)(_button.CustomThemeButton, {
    style: {
      height: badgeDimensions,
      width: badgeDimensions,
      background: "var(--ds-background-accent-yellow-subtler, #F8E6A0)",
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center'
    },
    onClick: onClick,
    iconAfter: (0, _react2.jsx)(_comment.default, {
      label: title,
      size: badgeSize
    })
  }));
};