import theme from '../middleware/theme';
import { create, tsx } from '@dojo/framework/core/vdom';
import * as css from '../theme/default/breadcrumb-group.m.css';
import * as fixedCss from './styles/breadcrumb-group.m.css';
const separatorFactory = create({ theme });
export const Separator = separatorFactory(function Separator({ children, middleware: { theme } }) {
    const themeCss = theme.classes(css);
    return (tsx("li", { "aria-hidden": "true", classes: themeCss.listItem },
        tsx("span", { classes: [fixedCss.separatorFixed, themeCss.separator] }, children())));
});
export { Separator as BreadcrumbSeparator };
const breadcrumbFactory = create({ theme }).properties();
export const Breadcrumb = breadcrumbFactory(function Breadcrumb({ children, middleware: { theme }, properties }) {
    const { current, href, title } = properties();
    const themeCss = theme.classes(css);
    return (tsx("li", { classes: [themeCss.listItem, current ? themeCss.current : undefined] }, href ? (tsx("a", { "aria-current": current || undefined, classes: [fixedCss.breadcrumbFixed, themeCss.breadcrumb], href: href, title: title }, children())) : (tsx("span", { "aria-current": current || undefined, classes: [fixedCss.breadcrumbFixed, themeCss.breadcrumb] }, children()))));
});
const factory = create({ theme })
    .properties()
    .children();
export const BreadcrumbGroup = factory(function BreadcrumbGroup({ children, properties, middleware: { theme } }) {
    const { items, label, classes, theme: themeProp, variant } = properties();
    const themeCss = theme.classes(css);
    const defaultRenderer = (items) => {
        const lastIndex = items.length - 1;
        return items.map((item, index) => (tsx("virtual", null,
            index !== 0 && tsx(Separator, { key: `breadcrumb-${index}-separator` }, "/"),
            tsx(Breadcrumb, { key: `breadcrumb-${index}`, current: index === lastIndex ? 'page' : undefined, href: item.href, title: item.title, classes: classes, theme: themeProp, variant: variant }, item.label))));
    };
    const [renderer = defaultRenderer] = children();
    return (tsx("nav", { classes: [theme.variant(), themeCss.root], "aria-label": label },
        tsx("ol", { classes: [fixedCss.listFixed, themeCss.list] }, renderer(items))));
});
export default BreadcrumbGroup;

/*# sourceMappingURL=index.mjs.map*/