import { jsx as _jsx } from "react/jsx-runtime";
import { useEffect, useRef, useState } from "react";
import styles from "./style.module.scss";
import ToolTip from "../Tooltip";
import clsx from "clsx";
const EllipsisText = ({ children = "Placeholder text to be truncated is as follows", maxWidth = "100%", toolTipPosition = "top", tooltipDisabled = false, className, }) => {
    const containerRef = useRef(null);
    const [isEllipsisActive, setIsEllipsisActive] = useState(false);
    useEffect(() => {
        const container = containerRef.current;
        if (!container)
            return;
        const isOverflowing = container.offsetWidth < container.scrollWidth;
        setIsEllipsisActive(isOverflowing);
    }, [maxWidth]);
    const compositeClassNames = clsx({
        [styles.ellipsisTextStyling]: true,
        ...(className && { [className]: true }),
    });
    return (_jsx(ToolTip, { content: children, isDisabled: tooltipDisabled || !isEllipsisActive, toolTipPosition: toolTipPosition, children: _jsx("div", { ref: containerRef, style: { maxWidth }, className: compositeClassNames, children: children }) }));
};
export default EllipsisText;
