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

var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, {
  enumerable: true,
  configurable: true,
  writable: true,
  value
}) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {})) if (__hasOwnProp.call(b, prop)) __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols) for (var prop of __getOwnPropSymbols(b)) {
    if (__propIsEnum.call(b, prop)) __defNormalProp(a, prop, b[prop]);
  }
  return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
var __objRest = (source, exclude) => {
  var target = {};
  for (var prop in source) if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0) target[prop] = source[prop];
  if (source != null && __getOwnPropSymbols) for (var prop of __getOwnPropSymbols(source)) {
    if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop)) target[prop] = source[prop];
  }
  return target;
};
const OverflowText = "E_ou7iq30";
const SingleLineStyle = "E_s1tui002";
const _exp = /*#__PURE__*/() => ({
  lineClamp = 2
}) => lineClamp;
const MultipleLine = /*#__PURE__*/styled('div')({
  name: "MultipleLine",
  class: "E_mxrc2zg",
  propsAsIs: false,
  vars: {
    "mxrc2zg-0": [_exp()]
  }
});
const TooltipDefaultClass = "E_t1vv6d68";
const OverflowTooltip = props => {
  const _a = props,
    {
      content,
      className,
      onClick,
      multiLines,
      overlayClassName
    } = _a,
    restProps = __objRest(_a, ["content", "className", "onClick", "multiLines", "overlayClassName"]);
  const tooltip = props.tooltip || content;
  const [ellipsis, setEllipsis] = useState(false);
  const textRef = useRef(null);
  const isMultiLine = multiLines && multiLines > 1;
  useEffect(() => {
    const ele = textRef.current;
    let observer;
    if (ele) {
      const handleResize = debounce(() => {
        if (isMultiLine) {
          setEllipsis(ele.scrollHeight > ele.offsetHeight);
        } else {
          setEllipsis(ele.scrollWidth > ele.offsetWidth);
        }
      }, 200);
      observer = new ResizeObserver(handleResize);
      observer.observe(ele);
    }
    return () => {
      observer == null ? void 0 : observer.disconnect();
    };
  });
  return /* @__PURE__ */React__default.createElement(Tooltip, __spreadProps(__spreadValues(__spreadValues({}, restProps), !ellipsis && {
    visible: false
  }), {
    title: tooltip,
    overlayClassName: cx(TooltipDefaultClass, overlayClassName)
  }), isMultiLine ? /* @__PURE__ */React__default.createElement(MultipleLine, {
    ref: textRef,
    className: cx(OverflowText, className),
    lineClamp: multiLines,
    onClick: () => {
      onClick && onClick();
    }
  }, /* @__PURE__ */React__default.createElement("span", null, content)) : /* @__PURE__ */React__default.createElement("div", {
    ref: textRef,
    className: cx(OverflowText, SingleLineStyle, className),
    onClick: () => {
      onClick && onClick();
    }
  }, /* @__PURE__ */React__default.createElement("span", null, content)));
};
var OverflowTooltip$1 = OverflowTooltip;

export { OverflowTooltip$1 as default };
