import "../atomic-icon/atomic-icon.js";
import { HighlightUtils } from "@coveo/headless";
import { html, render } from "lit";
import { when } from "lit/directives/when.js";
import { encodeForDomAttribute } from "../../../utils/string-utils.js";
const getPartialRecentQueryElement = (value, i18n)=>({
        part: 'recent-query-item',
        query: value,
        key: `recent-${encodeForDomAttribute(value)}`,
        ariaLabel: i18n.t('recent-query-suggestion-label', {
            query: value,
            interpolation: {
                escapeValue: false
            }
        })
    });
const getPartialRecentQueryClearElement = (i18n)=>({
        key: 'recent-query-clear',
        ariaLabel: i18n.t('clear-recent-searches', {
            interpolation: {
                escapeValue: false
            }
        }),
        part: 'recent-query-title-item suggestion-divider',
        hideIfLast: true
    });
const renderRecentQuery = ({ icon, query, value })=>{
    const hasQuery = '' !== query;
    const template = html`<div
    part="recent-query-content"
    class="pointer-events-none flex items-center text-left break-all"
  >
    <atomic-icon
      part="recent-query-icon"
      icon=${icon}
      class="mr-2 h-4 w-4 shrink-0"
    ></atomic-icon>

    ${when(hasQuery, ()=>html`<span
          part="recent-query-text"
          class="line-clamp-2 break-words"
          .innerHTML=${HighlightUtils.highlightString({
            content: value,
            openingDelimiter: '<span part="recent-query-text-highlight" class="font-bold">',
            closingDelimiter: '</span>',
            highlights: [
                {
                    offset: query.length,
                    length: value.length - query.length
                }
            ]
        })}
        ></span>`, ()=>html`<span part="recent-query-text" class="line-clamp-2 break-all">
          ${value}
        </span>`)}
  </div>`;
    const container = document.createElement('div');
    render(template, container);
    return container.firstElementChild;
};
const renderRecentQueryClear = ({ i18n })=>{
    const template = html` <div
    part="recent-query-title-content"
    class="pointer-events-none flex w-full justify-between"
  >
    <span class="font-bold" part="recent-query-title">
      ${i18n.t('recent-searches')}
    </span>
    <span part="recent-query-clear">${i18n.t('clear')}</span>
  </div>`;
    const container = document.createElement('div');
    render(template, container);
    return container.firstElementChild;
};
export { getPartialRecentQueryClearElement, getPartialRecentQueryElement, renderRecentQuery, renderRecentQueryClear };
