import React from 'react';
import { st, classes, vars } from './TextComponent.st.css.js';
const isTestEnv = process.env.NODE_ENV === 'test';
class TextComponent extends React.PureComponent {
    constructor(props) {
        super(props);
        this.requestedRecalculationMount = null;
        this.requestedRecalculationUpdate = [];
        this._getEllipsisClasses = () => {
            const { ellipsis, maxLines } = this.props;
            const ellipsisLines = maxLines && maxLines > 1 ? 'multiline' : 'singleLine';
            return (className) => ellipsis ? st(classes.text, { ellipsisLines }, className) : className;
        };
        this.renderChildren = this.renderChildren.bind(this);
        this.renderElement = this.renderElement.bind(this);
    }
    componentDidMount() {
        if (!this.props.textRendered) {
            /**
             * The requestAnimationFrame implementation is meant for browser only race condition bug fix.
             * It does not get reproduced in test environment due JSDOM being not a browser.
             * So we skip the requestAnimationFrame part in order not to have delays in calculations.
             */
            if (isTestEnv) {
                return this.props.onTextRendered();
            }
            this.requestedRecalculationMount = requestAnimationFrame(() => {
                this.props.onTextRendered();
            });
        }
    }
    componentDidUpdate() {
        if (!this.props.textRendered) {
            /**
             * The requestAnimationFrame implementation is meant for browser only race condition bug fix.
             * It does not get reproduced in test environment due JSDOM being not a browser.
             * So we skip the requestAnimationFrame part in order not to have delays in calculations.
             */
            if (isTestEnv) {
                return this.props.onTextRendered();
            }
            this.requestedRecalculationUpdate.push(requestAnimationFrame(() => {
                this.props.onTextRendered();
            }));
        }
    }
    componentWillUnmount() {
        if (this.requestedRecalculationMount) {
            cancelAnimationFrame(this.requestedRecalculationMount);
        }
        if (this.requestedRecalculationUpdate.length !== 0) {
            this.requestedRecalculationUpdate.forEach(id => cancelAnimationFrame(id));
        }
    }
    renderChildren({ text, suffix, }) {
        const { textElementRef, isEllipsisActive, tooltipRef } = this.props;
        if (suffix && isEllipsisActive) {
            const lineHeight = textElementRef?.current &&
                window.getComputedStyle(textElementRef.current).lineHeight;
            return (React.createElement(React.Fragment, null,
                React.createElement("span", { style: { shapeOutside: `inset(calc(100% - ${lineHeight}) 0 0)` }, className: st(classes.suffix, classes.multilineSuffix), onMouseEnter: () => tooltipRef?.current?.close() }, suffix),
                React.createElement("span", { onMouseEnter: () => tooltipRef?.current?.open() }, text)));
        }
        else if (suffix) {
            return (React.createElement(React.Fragment, null,
                React.createElement("span", null, text),
                React.createElement("span", { className: classes.suffix }, suffix)));
        }
        else {
            return text;
        }
    }
    renderElement({ element, suffix, }) {
        const { maxLines = 1 } = this.props;
        const hasMultilineSuffix = maxLines > 1 && !!suffix;
        return hasMultilineSuffix ? (React.createElement("div", { className: classes.multilineSuffixWrapper }, element)) : (element);
    }
    render() {
        const { render, maxLines, textElementRef } = this.props;
        return render({
            ref: textElementRef,
            ellipsisClasses: this._getEllipsisClasses(),
            ellipsisInlineStyle: { [vars.maxLines]: maxLines },
            renderChildren: this.renderChildren,
            renderElement: this.renderElement,
        });
    }
}
export default TextComponent;
//# sourceMappingURL=TextComponent.js.map