import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2022-2025 GoodData Corporation
import { useMemo, useState } from "react";
import cx from "classnames";
import { useIntl } from "react-intl";
const LINE_LENGTH = 28;
const LINE_NUMBER = 10;
/**
 * Multiline ellipsis does not exist natively, so this is a simple version of it.
 *
 * The component cuts the text at approximately 'maxLines' lines.
 * It renders button 'Show more'/'Show less'.
 * The new line character poses the most trouble to calculate the cut point,
 * so it will estimate how much character worth of space was taken by it.
 *
 * There is several constants: the width is taken as 190px, the font-size is
 * 13px. The text is wrapped by words, so 28 characters is an approximate count
 * per line. By these metrics it can find a point to shorten the text. It is not
 * precise value, but it works most of the time, sometimes rendering 9 or 11 lines,
 * which is acceptable for this component usage.
 *
 * @internal
 */
export function EllipsisText({ text, maxLines = LINE_NUMBER }) {
    const [collapsed, setCollapsed] = useState(true);
    const intl = useIntl();
    const overflowIndex = useMemo(() => {
        const maxLength = maxLines * LINE_LENGTH;
        let positionWithNewLine = 0;
        for (let i = 0; i < text.length; i++) {
            if (text[i] === "\n" || text[i] === "\r" || text[i] === "\r\n") {
                const usedCharactersOnLine = positionWithNewLine % LINE_LENGTH;
                const remainingCharactersOnLine = LINE_LENGTH - usedCharactersOnLine;
                positionWithNewLine += remainingCharactersOnLine;
            }
            else {
                positionWithNewLine++;
            }
            if (positionWithNewLine > maxLength) {
                return i;
            }
        }
        return null;
    }, [text, maxLines]);
    return (_jsxs("div", { className: "gd-ellipsis-text", children: [
            _jsx("div", { className: cx("gd-ellipsis-text-content", { "gd-ellipsis-text-fixed": overflowIndex }), children: overflowIndex && collapsed ? (_jsxs(_Fragment, { children: [
                        _jsx("span", { children: text.slice(0, overflowIndex - 1) }), _jsx("span", { style: { userSelect: "none" }, children: "\u2026" })
                    ] })) : (_jsx("span", { children: text })) }), overflowIndex ? (_jsx("button", { className: "gd-ellipsis-text-button", onClick: () => setCollapsed((isCollapsed) => !isCollapsed), children: collapsed
                    ? intl.formatMessage({ id: "descriptionPanel.button.more" })
                    : intl.formatMessage({ id: "descriptionPanel.button.less" }) })) : null] }));
}
