import _extends from "@babel/runtime/helpers/extends";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
/** @jsx jsx */
import React from 'react';
import { css, jsx } from '@emotion/react';
import { injectIntl } from 'react-intl-next';
import { N200, N400 } from '@atlaskit/theme/colors';
import { messages } from './messages';
var captionWrapperStyle = css({
  marginTop: "var(--ds-space-100, 8px)",
  textAlign: 'center',
  position: 'relative',
  color: "var(--ds-text-subtle, ".concat(N400, ")")
});
var placeholderStyle = css({
  color: "var(--ds-text-subtlest, ".concat(N200, ")"),
  position: 'absolute',
  top: 0,
  width: '100%'
});
export var CaptionComponent = /*#__PURE__*/function (_React$Component) {
  _inherits(CaptionComponent, _React$Component);
  var _super = _createSuper(CaptionComponent);
  function CaptionComponent() {
    _classCallCheck(this, CaptionComponent);
    return _super.apply(this, arguments);
  }
  _createClass(CaptionComponent, [{
    key: "render",
    value: function render() {
      var _this$props = this.props,
        selected = _this$props.selected,
        hasContent = _this$props.hasContent,
        children = _this$props.children,
        dataAttributes = _this$props.dataAttributes,
        formatMessage = _this$props.intl.formatMessage;
      var showPlaceholder = !selected && !hasContent;
      return jsx("div", _extends({
        "data-media-caption": true,
        "data-testid": "media-caption"
      }, dataAttributes, {
        css: captionWrapperStyle
      }), showPlaceholder ? jsx("p", {
        css: placeholderStyle
      }, formatMessage(messages.placeholder)) : null, children);
    }
  }]);
  return CaptionComponent;
}(React.Component);
export default injectIntl(CaptionComponent);