import { html } from "lit";
import { repeat } from "lit/directives/repeat.js";
import { styleMap } from "lit/directives/style-map.js";
import { renderFieldsetGroup } from "../../../common/fieldset-group.js";
import { renderIconButton } from "../../../common/icon-button.js";
import { multiClassMap, tw } from "../../../../directives/multi-class-map.js";
import add from "../../../../images/add.js";
import arrow_bottom_rounded from "../../../../images/arrow-bottom-rounded.js";
import arrow_top_rounded from "../../../../images/arrow-top-rounded.js";
import remove from "../../../../images/remove.js";
const identifierKeywordsSection = 'coveo-quickview-sidebar-keywords';
const renderKeywords = ({ props })=>html`
    <div id=${identifierKeywordsSection}>
      ${repeat(Object.values(props.words), (keyword)=>keyword.text, (keyword)=>{
        const wordIsEnabled = !props.highlightKeywords.highlightNone && (void 0 === props.highlightKeywords.keywords[keyword.text] || true === props.highlightKeywords.keywords[keyword.text].enabled);
        const keywordContainerClasses = tw({
            'bg-background border-neutral flex grow items-center overflow-x-auto rounded-lg border': true,
            'pointer-events-none opacity-50': !wordIsEnabled
        });
        const navigationLabel = props.i18n.t('quickview-navigate-keywords', {
            occurrences: keyword.occurrences,
            keyword: keyword.text
        });
        const formattedOccurrences = new Intl.NumberFormat(props.i18n.language, {
            notation: 'compact'
        }).format(keyword.occurrences);
        const toggleLabel = props.i18n.t('quickview-remove-word');
        const ariaPressed = wordIsEnabled ? 'false' : 'true';
        const tabIndex = props.highlightKeywords.highlightNone ? -1 : 0;
        return html`
            <div class="my-4 flex w-100 items-center justify-between gap-x-2">
              <div class=${multiClassMap(keywordContainerClasses)}>
                <div
                  class="flex grow items-center border-r p-4"
                  aria-hidden="true"
                >
                  <div
                    class="mr-2 h-5 w-5 flex-none"
                    style=${styleMap({
            backgroundColor: keyword.color
        })}
                  ></div>
                  <div class="mr-2 grow whitespace-nowrap">${keyword.text}</div>
                  <div class="flex-none">(${formattedOccurrences})</div>
                </div>
                ${renderFieldsetGroup({
            props: {
                label: navigationLabel
            }
        })(html`
                  <div class="flex px-2">
                    ${renderIconButton({
            props: {
                partPrefix: 'sidebar-next',
                icon: arrow_bottom_rounded,
                disabled: !wordIsEnabled,
                style: 'text-transparent',
                class: 'border-0',
                ariaLabel: props.i18n.t('next'),
                title: props.i18n.t('next'),
                onClick: ()=>keyword.navigateForward()
            }
        })}
                    ${renderIconButton({
            props: {
                partPrefix: 'sidebar-previous',
                icon: arrow_top_rounded,
                disabled: !wordIsEnabled,
                style: 'text-transparent',
                class: 'border-0',
                ariaLabel: props.i18n.t('previous'),
                title: props.i18n.t('previous'),
                onClick: ()=>keyword.navigateBackward()
            }
        })}
                  </div>
                `)}
              </div>
              ${renderIconButton({
            props: {
                partPrefix: 'sidebar-remove-word',
                class: props.highlightKeywords.highlightNone ? 'pointer-events-none opacity-50' : '',
                tabIndex,
                ariaPressed,
                style: 'text-transparent',
                icon: wordIsEnabled ? remove : add,
                ariaLabel: toggleLabel,
                onClick: ()=>{
                    props.onHighlightKeywords({
                        ...props.highlightKeywords,
                        keywords: {
                            ...props.highlightKeywords.keywords,
                            [keyword.text]: {
                                enabled: !wordIsEnabled,
                                indexIdentifier: keyword.indexIdentifier
                            }
                        }
                    });
                }
            }
        })}
            </div>
          `;
    })}
    </div>
  `;
export { identifierKeywordsSection, renderKeywords };
