import { html, nothing } from "lit";
import { when } from "lit/directives/when.js";
import minus from "../../../../images/minus.js";
import plus from "../../../../images/plus.js";
import "../../atomic-icon/atomic-icon.js";
import { renderButton } from "../../button.js";
const renderFacetShowMoreLess = ({ props })=>{
    const label = props.i18n.t(props.label);
    const showMore = props.i18n.t('show-more');
    const showMoreFacetValues = props.i18n.t('show-more-facet-values', {
        label
    });
    const showLess = props.i18n.t('show-less');
    const showLessFacetValues = props.i18n.t('show-less-facet-values', {
        label
    });
    const btnClasses = 'flex items-baseline text-left p-2 text-sm max-w-full';
    const iconClasses = 'w-2 h-2 mr-1';
    if (!props.canShowLessValues && !props.canShowMoreValues) return nothing;
    return html`<div class="mt-2">
    ${when(props.canShowLessValues, ()=>renderButton({
            props: {
                style: 'text-primary',
                part: 'show-less',
                class: btnClasses,
                ariaLabel: showLessFacetValues,
                onClick: ()=>props.onShowLess(),
                ref: (el)=>props.showLessRef?.(el)
            }
        })(html`<atomic-icon
            part="show-more-less-icon"
            class=${iconClasses}
            icon=${minus}
          ></atomic-icon>
          <span class="truncate">${showLess}</span>`))}
    ${when(props.canShowMoreValues, ()=>renderButton({
            props: {
                style: 'text-primary',
                part: 'show-more',
                class: btnClasses,
                ariaLabel: showMoreFacetValues,
                onClick: ()=>props.onShowMore(),
                ref: (el)=>props.showMoreRef?.(el)
            }
        })(html`<atomic-icon
            part="show-more-less-icon"
            class=${iconClasses}
            icon=${plus}
          ></atomic-icon>
          <span class="truncate">${showMore}</span>`))}
  </div>`;
};
export { renderFacetShowMoreLess };
