import "../../atomic-icon/atomic-icon.js";
import { html } from "lit";
import arrow_left_rounded from "../../../../images/arrow-left-rounded.js";
import { getFieldValueCaption } from "../../../../utils/field-utils.js";
import { renderButton } from "../../button.js";
const renderCategoryFacetParentButton = ({ props })=>{
    const displayValue = getFieldValueCaption(props.field, props.facetValue.value, props.i18n);
    const ariaLabel = props.i18n.t('facet-value', {
        value: displayValue,
        count: props.facetValue.numberOfResults,
        formattedCount: props.facetValue.numberOfResults.toLocaleString(props.i18n.language)
    });
    return renderButton({
        props: {
            style: 'text-neutral',
            part: 'parent-button',
            ariaPressed: 'false',
            onClick: ()=>{
                props.onClick();
            },
            ariaLabel: ariaLabel
        }
    })(html`
    <atomic-icon
      icon=${arrow_left_rounded}
      part="back-arrow"
      class="back-arrow"
    ></atomic-icon>
    <span class="truncate">${displayValue}</span>
  `);
};
export { renderCategoryFacetParentButton };
