import escape_html from "escape-html";
import { html, nothing } from "lit";
import { renderButton } from "../../button.js";
function matchesFound(key, query, i18n) {
    return i18n.t(key, {
        query: `<span class="font-bold italic text-on-background" part="matches-query">${escape_html(query)}</span>`,
        interpolation: {
            escapeValue: false
        }
    });
}
function clickableMoreMatchesFound(query, i18n) {
    return i18n.t('more-matches-for', {
        query: `<span class="font-bold italic" part="matches-query">${escape_html(query)}</span>`,
        interpolation: {
            escapeValue: false
        }
    });
}
const renderFacetSearchMatches = ({ props })=>{
    if (!props.numberOfMatches) return html`
      <div class="px-2">
        <div
          part="no-matches"
          class="bg-neutral-light text-neutral-dark truncate rounded p-3 text-sm"
          .innerHTML=${matchesFound('no-matches-found-for', props.query, props.i18n)}
        ></div>
      </div>
    `;
    if (props.hasMoreMatches) {
        if (props.showMoreMatches) return html`
        <div class="px-2">
          ${renderButton({
            props: {
                style: 'text-primary',
                class: 'mt-3 p-2',
                onClick: props.showMoreMatches
            }
        })(html`<div
              part="more-matches"
              class="truncate text-sm"
              .innerHTML=${clickableMoreMatchesFound(props.query, props.i18n)}
            ></div>`)}
        </div>
      `;
        return html`
      <div class="px-2">
        <div
          part="more-matches"
          class="text-neutral-dark mt-3 truncate text-sm"
          .innerHTML=${matchesFound('more-matches-for', props.query, props.i18n)}
        ></div>
      </div>
    `;
    }
    return nothing;
};
export { renderFacetSearchMatches };
