import { __assign, __rest } from "tslib";
import * as React from 'react';
import { select } from 'd3-selection';
import { getSecureProps } from '../../../utilities/utilities';
export var Textbox = function (props) {
    var textElementRef = React.useRef(null);
    var wrapWords = function () {
        if (!textElementRef.current) {
            return;
        }
        var text = select(textElementRef.current);
        var words = props.text.split(/\s+/);
        var line = [];
        var tspan = text.append('tspan');
        var numLines = 0;
        words.forEach(function (word) {
            line.push(word);
            tspan.text(line.join(' '));
            var node = tspan.node();
            if (node && node.getComputedTextLength() > props.width && line.length > 1) {
                numLines++;
                line.pop();
                tspan.text(line.join(' '));
                line = [word];
                tspan = text.append('tspan').text(word).attr('dy', props.lineHeight).attr('x', props.x);
            }
        });
        // bottom aligns text
        text.attr('dy', -numLines * props.lineHeight);
        return function () {
            text.selectAll('tspan').remove();
        };
    };
    React.useEffect(wrapWords);
    var lineHeight = props.lineHeight, rest = __rest(props, ["lineHeight"]);
    return React.createElement("text", __assign({ ref: textElementRef }, getSecureProps(rest)));
};
//# sourceMappingURL=Textbox.js.map