/*
 * Copyright (c) 2023-2025 Datalayer, Inc.
 * Distributed under the terms of the Modified BSD License.
 */
import { useRef, useEffect, useState } from 'react';
export const useTextRevealAnimationLines = (text) => {
    const ref = useRef(null);
    const [lines, setLines] = useState();
    useEffect(() => {
        if (!ref.current || !text)
            return;
        const wrapLines = () => {
            const element = ref.current;
            if (!element || !text)
                return;
            const originalColor = window.getComputedStyle(element).color;
            element.style.color = 'transparent';
            element.textContent = '';
            const words = text.split(' ');
            const lineBreakPositions = [];
            let prevHeight = 0;
            const linesArr = [];
            for (const word of words) {
                element.textContent += `${word} `;
                const height = element.offsetHeight;
                if (linesArr.length === 0) {
                    prevHeight = height;
                    linesArr.push([word]);
                    continue;
                }
                if (height > prevHeight) {
                    lineBreakPositions.push(linesArr.length);
                    linesArr.push([word]);
                }
                else {
                    linesArr.at(-1)?.push(word);
                }
                prevHeight = height;
            }
            element.style.color = originalColor;
            element.textContent = '';
            setLines(linesArr.map(line => line.join(' ')));
        };
        wrapLines();
    }, [text]);
    return { ref, lines };
};
