'use strict';

var core = require('@linaria/core');
var react = require('@linaria/react');
var _ = require('lodash');
var React = require('react');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);

const _exp = /*#__PURE__*/() => props => props.maxHeight ? `${props.maxHeight}px` : "unset";
const Wrapper = /*#__PURE__*/react.styled('div')({
  name: "Wrapper",
  class: "E_w1dxz879",
  propsAsIs: false,
  vars: {
    "w1dxz879-0": [_exp()]
  }
});
const EllipsisTooltipContent = ({
  tooltip,
  maxHeight,
  contentWrapperClassName,
  ellipsisTips
}) => {
  const overFlowWrapperRef = React.useRef(null);
  const [showTips, setShowTips] = React.useState(null);
  React.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.default.createElement(Wrapper, {
    className: core.cx(contentWrapperClassName, _.isNull(showTips) && "eagle-ellipsis-content"),
    maxHeight
  }, /* @__PURE__ */React__default.default.createElement("div", {
    className: "ellipsis-tooltip",
    ref: overFlowWrapperRef
  }, tooltip), !!showTips && /* @__PURE__ */React__default.default.createElement("span", {
    className: "tips"
  }, ellipsisTips));
};
var EllipsisTooltipContent$1 = EllipsisTooltipContent;

module.exports = EllipsisTooltipContent$1;
