import { html, nothing } from "lit";
import { when } from "lit/directives/when.js";
import { renderHighlightKeywordsCheckbox } from "./highlight-keywords-checkbox.js";
import { renderKeywords } from "./keywords.js";
import { renderMinimizeButton } from "./minimize-button.js";
const renderQuickviewSidebar = ({ props })=>{
    const numberOfWords = Object.values(props.words).length;
    if (0 === numberOfWords) return nothing;
    return html`
    <div class="border-neutral h-full border-r p-4">
      ${when(props.minimized, ()=>renderMinimizeButton({
            props: {
                i18n: props.i18n,
                minimized: props.minimized,
                onMinimize: props.onMinimize,
                highlightKeywords: props.highlightKeywords,
                wordsLength: numberOfWords
            }
        }))}
      <div class="flex items-center justify-between">
        <div class="flex items-center">
          ${renderHighlightKeywordsCheckbox({
        props
    })}
        </div>
        ${when(!props.minimized, ()=>html`
            <div>
              ${renderMinimizeButton({
            props: {
                i18n: props.i18n,
                minimized: props.minimized,
                onMinimize: props.onMinimize,
                highlightKeywords: props.highlightKeywords,
                wordsLength: numberOfWords
            }
        })}
            </div>
          `)}
      </div>

      ${when(!props.minimized, ()=>renderKeywords({
            props: {
                i18n: props.i18n,
                highlightKeywords: props.highlightKeywords,
                onHighlightKeywords: props.onHighlightKeywords,
                words: props.words
            }
        }))}
    </div>
  `;
};
export { renderQuickviewSidebar };
