import "../atomic-icon/atomic-icon.js";
import { html } from "lit";
import { multiClassMap, tw } from "../../../directives/multi-class-map.js";
import images_close from "../../../images/close.js";
import { getFirstBreadcrumbValue } from "./breadcrumb-utils.js";
const renderBreadcrumbContent = ({ props })=>{
    const value = getFirstBreadcrumbValue(props.breadcrumb, props.pathLimit);
    const isExclusion = 'excluded' === props.breadcrumb.state;
    const isSelected = 'selected' === props.breadcrumb.state;
    const isIdle = 'idle' === props.breadcrumb.state;
    const labelClass = tw({
        'max-w-[30ch] truncate': true,
        'group-hover:text-error group-focus-visible:text-error': isExclusion,
        'group-hover:text-primary group-focus-visible:text-primary': !isExclusion,
        idle: isIdle,
        selected: isSelected,
        excluded: isExclusion
    });
    const valueClass = tw({
        'ml-1': true,
        'max-w-[30ch] truncate': !props.breadcrumb.content,
        idle: isIdle && !props.breadcrumb.content,
        selected: isSelected && !props.breadcrumb.content,
        excluded: isExclusion && !props.breadcrumb.content
    });
    return html`<span part="breadcrumb-label" class=${multiClassMap(labelClass)}>
      ${props.i18n.t('with-colon', {
        text: props.breadcrumb.label,
        interpolation: {
            escapeValue: false
        }
    })}
    </span>
    <span part="breadcrumb-value" class=${multiClassMap(valueClass)}>
      ${props.breadcrumb.content ?? value}
    </span>
    <atomic-icon
      part="breadcrumb-clear"
      class="mt-px ml-2 h-2.5 w-2.5"
      icon=${images_close}
    >
    </atomic-icon>`;
};
export { renderBreadcrumbContent };
