import React, { forwardRef } from "react";
import { cx } from "../../utils";
import { base as sizeCSS } from "./variations/_size/base";
import { base as viewCSS } from "./variations/_view/base";
import { base, Separator } from "./Breadcrumbs.styles";
import { addSeparator, convertIconSize } from "./utils";
import { getRenderItems } from "./utils/getShortItems";
export var breadcrumbsRoot = function breadcrumbsRoot(Root) {
    return /*#__PURE__*/ forwardRef(function(param, outerRootRef) {
        var view = param.view, size = param.size, separator = param.separator, items = param.items, _param_showItems = param.showItems, showItems = _param_showItems === void 0 ? items.length : _param_showItems, className = param.className;
        var renderSeparator = separator !== null && separator !== void 0 ? separator : /*#__PURE__*/ React.createElement(Separator, {
            color: "inherit",
            size: convertIconSize(size)
        });
        var renderItems = getRenderItems(items, renderSeparator, showItems);
        var itemsWithSeparator = addSeparator(renderItems, renderSeparator);
        return /*#__PURE__*/ React.createElement(Root, {
            ref: outerRootRef,
            size: size,
            view: view,
            className: cx(className),
            items: items
        }, itemsWithSeparator.map(function(item, index) {
            return /*#__PURE__*/ React.createElement(React.Fragment, {
                key: index
            }, item);
        }));
    });
};
export var breadcrumbsConfig = {
    name: 'Breadcrumbs',
    tag: 'div',
    layout: breadcrumbsRoot,
    base: base,
    variations: {
        view: {
            css: viewCSS
        },
        size: {
            css: sizeCSS
        }
    },
    defaults: {
        view: 'default',
        size: 'm'
    }
};
