import { jsx as _jsx } from "react/jsx-runtime";
import { useState } from 'react';
import Tooltip from '../../design-system/Tooltip';
import Typography from '@mui/material/Typography';
import { composeSx } from '../../../utils/components';
import { truncate } from 'lodash';
/*
 * Differences with TypographyOverflowTooltip:
 * - TypographyOverflowTooltip detects horizontal overflow (scrollWidth > clientWidth) on mount and resize.
 *   Intended for single-line text with ellipsis.
 * - TextOverflowTip detects overflow on mouseEnter, covering three cases:
 *   1. `lineClamp`: vertical overflow (scrollHeight > clientHeight), for multiline text clipped with -webkit-line-clamp.
 *   2. `length`: character-based truncation via lodash truncate.
 *   3. No extra props: classic horizontal overflow, same behavior as TypographyOverflowTooltip.
 */
/**
 * Shows a tooltip with the full text when it is truncated.
 * Use `lineClamp` for multiline or `length` to truncate by character count.
 */
export const TextOverflowTip = ({ primary, length, lineClamp, slotProps, }) => {
    const [tooltipEnabled, setTooltipEnabled] = useState(false);
    const shouldTruncate = length && length < primary.length && !lineClamp;
    const handleShouldShow = ({ currentTarget }) => {
        if (shouldTruncate) {
            return setTooltipEnabled(true);
        }
        if (lineClamp && currentTarget.scrollHeight > currentTarget.clientHeight) {
            return setTooltipEnabled(true);
        }
        if (currentTarget.scrollWidth > currentTarget.clientWidth) {
            setTooltipEnabled(true);
        }
    };
    const { typography: typographyProps, tooltip: tooltipProps } = slotProps ?? {};
    return (_jsx(Tooltip, { title: primary, open: tooltipEnabled, direction: "top", ...tooltipProps, children: _jsx(Typography, { onMouseEnter: handleShouldShow, onMouseLeave: () => setTooltipEnabled(false), noWrap: !shouldTruncate && !lineClamp, ...typographyProps, sx: composeSx({
                ...(lineClamp && {
                    WebkitLineClamp: lineClamp,
                    WebkitBoxOrient: 'vertical',
                    display: '-webkit-box',
                    overflow: 'hidden',
                    whiteSpace: 'normal',
                    overflowWrap: 'break-word',
                }),
                ...(!lineClamp &&
                    !length && {
                    textOverflow: 'ellipsis',
                    overflow: 'hidden',
                    whiteSpace: 'nowrap',
                }),
                width: '100%',
                ...(!typographyProps?.variant && {
                    fontSize: 'inherit',
                    fontWeight: 'inherit',
                }),
            }, typographyProps?.sx), children: shouldTruncate ? truncate(primary, { length }) : primary }) }));
};
export default TextOverflowTip;
