import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
/** @jsx jsx */
import { useEffect, useState } from 'react';
import { css, jsx } from '@emotion/react';
import debounce from 'lodash/debounce';
import { CustomThemeButton } from '@atlaskit/button';
import CommentIcon from '@atlaskit/icon/glyph/comment';
import { layers } from '@atlaskit/theme/constants';
import { commentMessages as messages } from '../media';
var commentBadgeWrapper = css({
  position: 'absolute',
  // closest parent element with position relative is .resizer-hover-zone, which includes 10px padding
  right: '14px',
  top: '2px',
  borderRadius: '3px',
  zIndex: layers.card()
});
var getDefaultSize = function getDefaultSize(node) {
  // width is the original width of image, not resized or currently rendered to user. Defaulting to medium for now
  return !node || node.attrs.width > 70 ? 'medium' : 'small';
};
export var CommentBadge = function CommentBadge(_ref) {
  var intl = _ref.intl,
    mediaNode = _ref.mediaNode,
    mediaElement = _ref.mediaElement,
    onClick = _ref.onClick;
  var _useState = useState(getDefaultSize(mediaNode)),
    _useState2 = _slicedToArray(_useState, 2),
    badgeSize = _useState2[0],
    setBadgeSize = _useState2[1];
  var title = intl.formatMessage(messages.viewAndAddCommentsOnMedia);
  useEffect(function () {
    var observer = new ResizeObserver(debounce(function (entries) {
      var _entries = _slicedToArray(entries, 1),
        entry = _entries[0];
      var _entry$contentRect = entry.contentRect,
        width = _entry$contentRect.width,
        height = _entry$contentRect.height;
      setBadgeSize(width > 70 || height > 70 ? 'medium' : 'small');
    }));
    if (mediaElement) {
      observer.observe(mediaElement);
    }
    return function () {
      observer.disconnect();
    };
  }, [mediaElement]);
  var badgeDimensions = badgeSize === 'medium' ? '24px' : '16px';
  return jsx("div", {
    css: commentBadgeWrapper
  }, jsx(CustomThemeButton, {
    style: {
      height: badgeDimensions,
      width: badgeDimensions,
      background: "var(--ds-background-accent-yellow-subtler, #F8E6A0)",
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center'
    },
    onClick: onClick,
    iconAfter: jsx(CommentIcon, {
      label: title,
      size: badgeSize
    })
  }));
};