"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _tooltip = require("../tooltip");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const MIN_LINE_HEIGHT = 1.2;
/**
 * The component recognizes whether a text element is overflowed truncate it with CSS and provide full text in the tooltip.
 * - supports custom tooltip text with custom placement.
 * - supports only one element as children inside
 * - need provide any HTML element inside component like <span> or <p>.
 * 🚨 NOTE ➡️: max-width & min-width for a parent element is required for proper work. 🚨
 * */
const TruncateWithTooltip = ({
  children,
  tooltipPlacement = _tooltip.TOOLTIP_PLACEMENT_TYPES.TOP,
  tooltipText,
  tooltipId,
  tooltipDocsLink,
  tooltipDelayType = _tooltip.TOOLTIP_DELAY_TYPES.FAST,
  tooltipTestId,
  className,
  isDisabled = false
}) => {
  const [isTruncating, setTruncating] = (0, _react.useState)(false);
  const [needLineHeight, setNeedLineHeight] = (0, _react.useState)(false);
  const [contentText, setContentText] = (0, _react.useState)(null);
  const elementRef = (0, _react.useRef)();
  // NOTE: This solution has a potential issue with a pixel or two when the text is long enough and will be ellipsed,
  // but the tooltip is not shown. That happens due to pixel rounding of scrollWidth and clientWidth.
  // While getBoundingClientRect could give us a precise width, it will include padding and borders,
  // and scrollWidth will still be rounded. Thus, we might get many false positives and show a tooltip too many times.
  const doesTextFit = target => target.scrollWidth <= target.clientWidth && target.scrollHeight <= target.clientHeight;
  const updateOverflow = ({
    target
  }) => {
    if (tooltipText || isDisabled) {
      return;
    }
    if (!isTruncating && !doesTextFit(target)) {
      setContentText(target.textContent);
      return setTruncating(true);
    }
    if (isTruncating && doesTextFit(target)) {
      setContentText(null);
      return setTruncating(false);
    }
  };
  const updatedChildren = /*#__PURE__*/_react.default.cloneElement(children, {
    className: (0, _classnames.default)('truncate-with-tooltip', className, needLineHeight && 'with-line-height'),
    onMouseOver: updateOverflow,
    ref: elementRef
  });
  (0, _react.useLayoutEffect)(() => {
    if (elementRef.current) {
      const {
        fontSize,
        lineHeight
      } = window.getComputedStyle(elementRef.current);
      const diff = parseFloat(lineHeight) / parseFloat(fontSize);
      // if line-height less then normal, scroll height will be more then clientHeight
      if (MIN_LINE_HEIGHT > diff) {
        setNeedLineHeight(true);
      }
    }
  }, []);
  return !isDisabled && (isTruncating || tooltipText) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.Tooltip, {
    testId: tooltipTestId,
    content: tooltipText ?? contentText,
    docsLink: tooltipDocsLink,
    placement: tooltipPlacement,
    delayType: tooltipDelayType,
    tooltipId: tooltipId,
    children: updatedChildren
  }) : updatedChildren;
};
var _default = exports.default = TruncateWithTooltip;