import React from 'react';
import { ascend, map, pipe, reverse, sort, split, toLower, trim } from 'ramda';
import { useStyles } from './styles';
export var Highlighter = function (_a) {
    var text = _a.text, highlight = _a.highlight, className = _a.className, _b = _a.multiTerm, multiTerm = _b === void 0 ? false : _b;
    var styles = useStyles();
    var hasHighlights = text && highlight;
    if (!hasHighlights) {
        return React.createElement(React.Fragment, null, text);
    }
    var REG_SPACES = new RegExp(/\s+/);
    var getMultiTerms = pipe(trim, split(REG_SPACES), map(toLower), sort(ascend), reverse);
    var highlightedValues = multiTerm ? getMultiTerms(highlight) : [toLower(highlight)];
    var regValues = highlightedValues.map(function (item) { return item.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&'); });
    var parts = text.split(new RegExp("(".concat(regValues.join('|'), ")"), 'gi'));
    return (React.createElement("span", null, parts.map(function (part, i) {
        var isHighlightedText = highlightedValues.includes(part.toLocaleLowerCase());
        return isHighlightedText ? (React.createElement("span", { key: i, className: className || styles.highlight }, part)) : (part);
    })));
};
