import { jsx as _jsx } from "react/jsx-runtime";
import { memo, useLayoutEffect, useRef } from 'react';
import './AutoTruncateText.scss';
import { useResizeSignal } from './useResizeSignal';
const AutoTruncateText = memo(({ children, className, lines = 1, interactive = false, placement = 'bottom', }) => {
    const textRef = useRef(null);
    const signal = useResizeSignal(textRef);
    useLayoutEffect(() => {
        const el = textRef.current;
        if (!el)
            return;
        const normalizedPlacement = placement?.toLowerCase();
        const truncated = lines > 1
            ? el.scrollHeight > el.clientHeight + 0.5
            : el.scrollWidth > el.clientWidth + 0.5;
        if (interactive) {
            el.setAttribute('data-tooltip-interactive', 'true');
        }
        if (normalizedPlacement) {
            el.setAttribute('data-tooltip-placement', normalizedPlacement);
        }
        if (truncated) {
            const text = el.textContent?.trim() || '';
            if (text) {
                el.setAttribute('data-tooltip', text);
            }
        }
        else {
            el.removeAttribute('data-tooltip');
        }
    }, [signal, children, interactive, lines, placement]);
    return (_jsx("div", { ref: textRef, className: className ? `ff-ellipsis ${className}` : 'ff-ellipsis', style: {
            display: lines > 1 ? '-webkit-box' : 'block',
            WebkitLineClamp: lines > 1 ? lines : undefined,
            WebkitBoxOrient: lines > 1 ? 'vertical' : undefined,
            whiteSpace: lines === 1 ? 'nowrap' : 'normal',
        }, children: children }));
});
AutoTruncateText.displayName = 'AutoTruncateText';
export default AutoTruncateText;
//# sourceMappingURL=AutoTruncateText.js.map