import { html } from "lit";
import { keyed } from "lit/directives/keyed.js";
import { renderButton } from "../button.js";
import { getFirstBreadcrumbValue, joinBreadcrumbValues } from "./breadcrumb-utils.js";
const renderBreadcrumbButton = ({ props })=>(children)=>{
        const fullValue = joinBreadcrumbValues(props.breadcrumb);
        const value = getFirstBreadcrumbValue(props.breadcrumb, props.pathLimit);
        const title = `${props.breadcrumb.label}: ${fullValue}`;
        const isExclusion = 'excluded' === props.breadcrumb.state;
        return html`
      ${keyed(value, html`<li class="breadcrumb">
          ${renderButton({
            props: {
                ref: (el)=>props.refCallback(el),
                part: 'breadcrumb-button',
                style: isExclusion ? 'outline-error' : 'outline-bg-neutral',
                class: 'py-2 px-3 flex items-center rounded-xl group',
                title: title,
                ariaLabel: props.i18n.t(isExclusion ? 'remove-exclusion-filter-on' : 'remove-inclusion-filter-on', {
                    value: title
                }),
                onClick: ()=>{
                    props.ariaController.message = props.i18n.t('filter-removed', {
                        value: title
                    });
                    props.onSelectBreadcrumb();
                }
            }
        })(children)}
        </li>`)}
    `;
    };
export { renderBreadcrumbButton };
