"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ExtensionLabel = void 0;
var _react = require("react");
var _react2 = require("@emotion/react");
var _classnames = _interopRequireDefault(require("classnames"));
var _colors = require("@atlaskit/theme/colors");
/** @jsx jsx */

var labelStyles = (0, _react2.css)({
  opacity: 0,
  display: 'inline-flex',
  width: 'max-content',
  justifyContent: 'left',
  position: 'absolute',
  // Unfortunately, these need to be these exact numbers - otherwise there will be a noticeable gap/overlap
  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
  top: '-19px',
  '&.inline': {
    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
    top: '-17px',
    marginLeft: "var(--ds-space-150, 12px)"
  },
  '&.show-label': {
    cursor: 'pointer',
    background: "var(--ds-background-accent-gray-subtle-pressed, ".concat(_colors.N300, ")"),
    color: "var(--ds-text-subtle, ".concat(_colors.N500, ")"),
    opacity: 1
  },
  borderRadius: "var(--ds-border-radius, 3px)".concat(" ", "var(--ds-border-radius, 3px)", " 0 0"),
  lineHeight: 1,
  '&.nested': {
    // Need to add indent if the node is nested since we removed previous indentation styles to make it fit properly
    // in the nested component
    marginLeft: "var(--ds-space-150, 12px)"
  },
  '&.bodied-background': {
    background: "var(--ds-surface, ".concat(_colors.N0, ")")
  },
  '&.bodied-border': {
    border: "1px solid ".concat("var(--ds-border, ".concat(_colors.N30, ")"))
  },
  // to account for bodied having borders now - adding this to help with less conditional styling
  border: '1px solid transparent',
  borderBottom: 'none'
});
var textStyles = (0, _react2.css)({
  fontSize: '14px',
  fontWeight: 'normal',
  padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-050, 4px)")
});
var ExtensionLabel = exports.ExtensionLabel = function ExtensionLabel(_ref) {
  var text = _ref.text,
    extensionName = _ref.extensionName,
    isNodeHovered = _ref.isNodeHovered,
    customContainerStyles = _ref.customContainerStyles,
    isNodeNested = _ref.isNodeNested,
    setIsNodeHovered = _ref.setIsNodeHovered,
    isBodiedMacro = _ref.isBodiedMacro;
  var classNames = (0, _classnames.default)('extension-title', 'extension-label', {
    nested: isNodeNested,
    inline: extensionName === 'inlineExtension',
    bodied: isBodiedMacro,
    'bodied-border': isBodiedMacro && !isNodeHovered,
    'bodied-background': isBodiedMacro && !isNodeHovered,
    'show-label': isNodeHovered || isBodiedMacro
  });
  var handleMouseEnter = (0, _react.useCallback)(function () {
    // If current node is hovered and the label is hovered,
    // consider the node as hovered so we can display the label for users to click on
    if (isNodeHovered) {
      setIsNodeHovered === null || setIsNodeHovered === void 0 || setIsNodeHovered(true);
    }
  }, [isNodeHovered, setIsNodeHovered]);
  var handleMouseLeave = (0, _react.useCallback)(function () {
    setIsNodeHovered === null || setIsNodeHovered === void 0 || setIsNodeHovered(false);
  }, [setIsNodeHovered]);
  return (0, _react2.jsx)("div", {
    style: customContainerStyles,
    onMouseEnter: handleMouseEnter,
    onMouseLeave: handleMouseLeave
  }, (0, _react2.jsx)("span", {
    "data-testid": "new-lozenge",
    css: labelStyles,
    className: classNames
  }, (0, _react2.jsx)("span", {
    css: textStyles
  }, text)));
};