"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _element = require("@wordpress/element");
var _i18n = require("@wordpress/i18n");
var _utils = require("./utils");
var _resizeTooltip = require("./styles/resize-tooltip.styles");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

const CORNER_OFFSET = 4;
const CURSOR_OFFSET_TOP = CORNER_OFFSET * 2.5;
function Label({
  label,
  position = _utils.POSITIONS.corner,
  zIndex = 1000,
  ...props
}, ref) {
  const showLabel = !!label;
  const isBottom = position === _utils.POSITIONS.bottom;
  const isCorner = position === _utils.POSITIONS.corner;
  if (!showLabel) {
    return null;
  }
  let style = {
    opacity: showLabel ? 1 : undefined,
    zIndex
  };
  let labelStyle = {};
  if (isBottom) {
    style = {
      ...style,
      position: 'absolute',
      bottom: CURSOR_OFFSET_TOP * -1,
      left: '50%',
      transform: 'translate(-50%, 0)'
    };
    labelStyle = {
      transform: `translate(0, 100%)`
    };
  }
  if (isCorner) {
    style = {
      ...style,
      position: 'absolute',
      top: CORNER_OFFSET,
      right: (0, _i18n.isRTL)() ? undefined : CORNER_OFFSET,
      left: (0, _i18n.isRTL)() ? CORNER_OFFSET : undefined
    };
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_resizeTooltip.TooltipWrapper, {
    "aria-hidden": "true",
    className: "components-resizable-tooltip__tooltip-wrapper",
    ref: ref,
    style: style,
    ...props,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_resizeTooltip.Tooltip, {
      className: "components-resizable-tooltip__tooltip",
      style: labelStyle,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_resizeTooltip.LabelText, {
        as: "span",
        children: label
      })
    })
  });
}
const ForwardedComponent = (0, _element.forwardRef)(Label);
var _default = exports.default = ForwardedComponent;
//# sourceMappingURL=label.js.map