import React, { useMemo } from 'react';
import { useIntl } from 'react-intl-next';
import CommentIcon from '@atlaskit/icon/core/comment';
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
import { Pressable, xcss } from '@atlaskit/primitives';
import Tooltip from '@atlaskit/tooltip';
import { commentMessages as messages } from '../media';
var baseStyles = xcss({
  borderRadius: 'radius.small'
});
var mediumBadgeStyles = xcss({
  height: 'space.300',
  width: 'space.300'
});
export var CommentBadgeNext = function CommentBadgeNext(_ref) {
  var _ref$status = _ref.status,
    status = _ref$status === void 0 ? 'default' : _ref$status,
    onClick = _ref.onClick,
    onMouseEnter = _ref.onMouseEnter,
    onMouseLeave = _ref.onMouseLeave;
  var intl = useIntl();
  var title = intl.formatMessage(messages.viewCommentsOnMedia);
  var colourToken = useMemo(function () {
    switch (status) {
      case 'active':
        return 'color.background.accent.yellow.subtlest.pressed';
      case 'entered':
        return 'color.background.accent.yellow.subtlest.hovered';
      default:
        return 'color.background.accent.yellow.subtlest';
    }
  }, [status]);
  return /*#__PURE__*/React.createElement(Tooltip, {
    position: "top",
    content: title
  }, /*#__PURE__*/React.createElement(Pressable, {
    xcss: [baseStyles, mediumBadgeStyles],
    padding: "space.0",
    onClick: onClick,
    onMouseEnter: onMouseEnter,
    onMouseLeave: onMouseLeave,
    backgroundColor: colourToken
  }, /*#__PURE__*/React.createElement(CommentIcon, {
    label: title,
    spacing: "spacious",
    color: "currentColor"
  })));
};