import { cx } from '@linaria/core';
import { styled } from '@linaria/react';
import { debounce, isNull } from 'lodash';
import React__default, { useRef, useState, useEffect } from 'react';

const _exp = /*#__PURE__*/() => props => props.maxHeight ? `${props.maxHeight}px` : "unset";
const Wrapper = /*#__PURE__*/styled('div')({
  name: "Wrapper",
  class: "E_4100_0_7_w1dxz879",
  propsAsIs: false,
  vars: {
    "w1dxz879-0": [_exp()]
  }
});
const EllipsisTooltipContent = ({
  tooltip,
  maxHeight,
  contentWrapperClassName,
  ellipsisTips
}) => {
  const overFlowWrapperRef = useRef(null);
  const [showTips, setShowTips] = useState(null);
  useEffect(() => {
    const wrapperEle = overFlowWrapperRef.current;
    let wrapperObserver;
    if (wrapperEle) {
      const handleVisibleTips = debounce(() => {
        setShowTips(wrapperEle.scrollHeight > (maxHeight || Infinity));
      }, 200);
      wrapperObserver = new ResizeObserver(handleVisibleTips);
      wrapperObserver.observe(wrapperEle);
    }
    return () => {
      wrapperObserver == null ? void 0 : wrapperObserver.disconnect();
    };
  }, [maxHeight]);
  return /* @__PURE__ */React__default.createElement(Wrapper, {
    className: cx(contentWrapperClassName, isNull(showTips) && "eagle-ellipsis-content"),
    maxHeight
  }, /* @__PURE__ */React__default.createElement("div", {
    className: "ellipsis-tooltip",
    ref: overFlowWrapperRef
  }, tooltip), !!showTips && /* @__PURE__ */React__default.createElement("span", {
    className: "tips"
  }, ellipsisTips));
};
var EllipsisTooltipContent$1 = EllipsisTooltipContent;

export { EllipsisTooltipContent$1 as default };
