/**
 * @module components/autocomplete/SuggestionItem
 */
import cx from 'classnames';
import Icon from 'components/Icon';
import escapeRegExp from 'lodash/escapeRegExp';
import styles from 'components/autocomplete/SuggestionItem/styles.css';
/**
 * Function used to return HTML markup for highlighting matching query in SearchSuggestion
 * @param value suggestion value
 * @param highlighted query that is entered in the Autocomplete
 * @param theme theme used by SuggestionItem
 */
function highlightSuggestion(value, highlighted, theme) {
    const regexp = new RegExp(`(${escapeRegExp(highlighted)})`, 'i');
    return value.replace(regexp, `<span class="${theme.highlightedText}">$1</span>`);
}
export default ({ item, query, theme = styles, highlighted, icon, isTrendingSearches, template, }) => {
    const value = item?.get('value');
    return (<li display-if={value} onClick={item.onClick} role="option" id={`suggestion-${Math.abs(item.hashCode())}`} aria-selected={highlighted} className={cx(theme.suggestion, theme[template], {
        [theme.highlighted]: highlighted,
        [theme.withIcon]: !!icon,
        [theme.trending]: isTrendingSearches,
    })}>
      <Icon display-if={icon} name={icon} className={theme.icon} width={14} height={14}/>
      <span dangerouslySetInnerHTML={{
        __html: highlightSuggestion(value, query.get('q'), theme),
    }}/>
    </li>);
};