"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.LegacyContentHeader = void 0;
var _react = require("react");
var _react2 = require("@emotion/react");
var _classnames = _interopRequireDefault(require("classnames"));
var _reactIntlNext = require("react-intl-next");
var _statusWarning = _interopRequireDefault(require("@atlaskit/icon/core/status-warning"));
var _link = _interopRequireDefault(require("@atlaskit/link"));
var _status = require("@atlaskit/status");
/**
 * @jsxRuntime classic
 * @jsx jsx
 */

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

var i18n = (0, _reactIntlNext.defineMessages)({
  legacyContentHeader: {
    id: 'editor.extension.legacyContentHeader',
    defaultMessage: 'Legacy Content',
    description: 'Header for the legacy content extension in the editor.'
  },
  contentHasLimitedFunctionality: {
    id: 'editor.extension.legacyContentHeader.contentHasLimitedFunctionality',
    defaultMessage: 'This content has limited functionality, ',
    description: 'Message indicating that the legacy content has limited functionality.'
  },
  learnMore: {
    id: 'editor.extension.legacyContentHeader.learnMore',
    defaultMessage: ' Learn more',
    description: 'Link text for learning more about the legacy content.'
  }
});
var lcmHeaderStyles = (0, _react2.css)({
  padding: "0 ".concat("var(--ds-space-200, 16px)", " ", "var(--ds-space-050, 4px)", " ", "var(--ds-space-200, 16px)"),
  backgroundColor: "var(--ds-background-neutral, #0515240F)",
  borderRadius: "var(--ds-radius-small, 4px)".concat(" ", "var(--ds-radius-small, 4px)", " 0 0"),
  boxShadow: "0 0 0 1px ".concat("var(--ds-background-neutral, #0515240F)"),
  position: 'relative',
  top: "-1px",
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
  '&.with-hover-border': {
    boxShadow: "0 0 0 1px ".concat("var(--ds-border-input, #8C8F97)")
  },
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
  '&.selected': {
    boxShadow: "0 0 0 1px ".concat("var(--ds-border-selected, #1868DB)"),
    backgroundColor: "var(--ds-background-selected, #E9F2FE)"
  },
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
  '& .status-lozenge-span': {
    marginRight: "var(--ds-space-100, 8px)"
  },
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
  '& > .legacy-content-header-text': {
    font: "var(--ds-font-body-small, 12px)",
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
    '& span': {
      paddingRight: "var(--ds-space-050, 4px)"
    },
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
    '& a': {
      cursor: 'pointer'
    }
  }
});
var LegacyContentHeader = exports.LegacyContentHeader = function LegacyContentHeader(_ref) {
  var isNodeHovered = _ref.isNodeHovered,
    isNodeSelected = _ref.isNodeSelected,
    onMouseEnter = _ref.onMouseEnter,
    onMouseLeave = _ref.onMouseLeave;
  var _useIntl = (0, _reactIntlNext.useIntl)(),
    formatMessage = _useIntl.formatMessage;
  var classNames = (0, _classnames.default)('legacy-content-header', {
    'with-hover-border': isNodeHovered,
    selected: isNodeSelected
  });
  var learnMore = (0, _react.useCallback)(function () {
    window.open('https://support.atlassian.com/confluence-cloud/docs/the-legacy-content-macro/', '_blank');
  }, []);
  return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("div", {
    "data-testid": "editor-extension-legacy-content-header",
    css: [lcmHeaderStyles]
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
    ,
    className: classNames
    // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
    ,
    onMouseEnter: onMouseEnter
    // eslint-disable-next-line @atlassian/a11y/mouse-events-have-key-events
    ,
    onMouseLeave: onMouseLeave
  }, (0, _react2.jsx)(_status.Status, {
    text: formatMessage(i18n.legacyContentHeader),
    color: isNodeSelected ? 'blue' : 'neutral',
    style: "bold",
    isBold: true
  }), (0, _react2.jsx)("span", {
    className: "legacy-content-header-text"
  }, (0, _react2.jsx)(_statusWarning.default, {
    label: formatMessage(i18n.contentHasLimitedFunctionality),
    size: "small"
  }), formatMessage(i18n.contentHasLimitedFunctionality), "\xA0", (0, _react2.jsx)(_link.default, {
    onClick: learnMore,
    href: "https://support.atlassian.com/confluence-cloud/docs/the-legacy-content-macro/",
    target: "_blank"
  }, formatMessage(i18n.learnMore)))));
};