/**
 * @jsxRuntime classic
 * @jsx jsx
 */

import { Fragment, useCallback } from 'react';

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css, jsx } from '@emotion/react';
import classnames from 'classnames';
import { defineMessages, useIntl } from 'react-intl-next';
import StatusWarningIcon from '@atlaskit/icon/core/status-warning';
import Link from '@atlaskit/link';
import { Status } from '@atlaskit/status';
var i18n = 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 = 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'
    }
  }
});
export var LegacyContentHeader = function LegacyContentHeader(_ref) {
  var isNodeHovered = _ref.isNodeHovered,
    isNodeSelected = _ref.isNodeSelected,
    onMouseEnter = _ref.onMouseEnter,
    onMouseLeave = _ref.onMouseLeave;
  var _useIntl = useIntl(),
    formatMessage = _useIntl.formatMessage;
  var classNames = classnames('legacy-content-header', {
    'with-hover-border': isNodeHovered,
    selected: isNodeSelected
  });
  var learnMore = useCallback(function () {
    window.open('https://support.atlassian.com/confluence-cloud/docs/the-legacy-content-macro/', '_blank');
  }, []);
  return jsx(Fragment, null, 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
  }, jsx(Status, {
    text: formatMessage(i18n.legacyContentHeader),
    color: isNodeSelected ? 'blue' : 'neutral',
    style: "bold",
    isBold: true
  }), jsx("span", {
    className: "legacy-content-header-text"
  }, jsx(StatusWarningIcon, {
    label: formatMessage(i18n.contentHasLimitedFunctionality),
    size: "small"
  }), formatMessage(i18n.contentHasLimitedFunctionality), "\xA0", jsx(Link, {
    onClick: learnMore,
    href: "https://support.atlassian.com/confluence-cloud/docs/the-legacy-content-macro/",
    target: "_blank"
  }, formatMessage(i18n.learnMore)))));
};