import { __assign, __rest } from "tslib";
// @ts-nocheck
import './Breadcrumbs.css';
import React, { useMemo } from 'react';
import { IconSlash } from '../../icons/IconSlash/IconSlash';
import { cn } from '../../utils/bem';
import { getSizeByMap } from '../../utils/getSizeByMap';
import { Button } from '../Button/Button';
export var breadcrumbPropSize = ['m'];
export var breadcrumbPropSizeDefault = breadcrumbPropSize[0];
export var cnBreadcrumbs = cn('Breadcrumbs');
var sizeMap = {
    xs: 's',
    s: 's',
    m: 's',
    l: 'm'
};
// eslint-disable-next-line @typescript-eslint/no-redeclare
export var Breadcrumbs = React.forwardRef(function (props, ref) {
    var pages = props.pages, getLabel = props.getLabel, getIsActive = props.getIsActive, getLink = props.getLink, getIcon = props.getIcon, _a = props.size, size = _a === void 0 ? breadcrumbPropSizeDefault : _a, _b = props.maxCount, maxCount = _b === void 0 ? 2 : _b, onClick = props.onClick, _c = props.onlyIconRoot, onlyIconRoot = _c === void 0 ? false : _c, className = props.className, history = props.history, inverted = props.inverted, restProps = __rest(props, ["pages", "getLabel", "getIsActive", "getLink", "getIcon", "size", "maxCount", "onClick", "onlyIconRoot", "className", "history", "inverted"]);
    var iconSize = getSizeByMap(sizeMap, size);
    var _d = useMemo(function () {
        var rest = pages.slice();
        var head = rest.splice(0, 1);
        var tail = rest.splice(2 - maxCount);
        return {
            head: head,
            tail: tail,
            rest: rest,
            totalLength: pages.length
        };
    }, [pages, maxCount]), head = _d.head, tail = _d.tail, rest = _d.rest, totalLength = _d.totalLength;
    var delimiter = useMemo(function () { return (React.createElement(IconSlash, { size: iconSize, className: cnBreadcrumbs('Delimiter', {
            size: iconSize
        }) })); }, [iconSize]);
    var clickHandler = function (page, e) {
        if (!onClick) {
            e.preventDefault();
            history.push(page.url);
        }
        else {
            onClick(page, e);
        }
    };
    var renderPages = function (pages, isFirst) {
        if (isFirst === void 0) { isFirst = false; }
        return pages.map(function (page) {
            var Icon = getIcon === null || getIcon === void 0 ? void 0 : getIcon(page);
            var label = getLabel(page);
            var link = getLink(page);
            var isActive = getIsActive === null || getIsActive === void 0 ? void 0 : getIsActive(page);
            return (React.createElement("li", { key: "".concat(label, ":").concat(link), className: cnBreadcrumbs('Item', {
                    isFirst: isFirst,
                    hideFirst: isFirst && totalLength >= 3
                }) },
                !isFirst && delimiter,
                React.createElement("a", { className: cnBreadcrumbs('Link', { active: isActive, inverted: inverted }), onClick: function (e) { return clickHandler(page, e); }, href: link },
                    Icon &&
                        (onlyIconRoot && isFirst ? (React.createElement(Button, { view: "clear", onlyIcon: true, iconLeft: Icon, size: iconSize })) : (React.createElement(Icon, { className: cnBreadcrumbs('Icon'), size: iconSize }))),
                    (!isFirst || !onlyIconRoot) && (React.createElement("span", { className: cnBreadcrumbs('Label') },
                        React.createElement("span", null, label))))));
        });
    };
    return (React.createElement("ul", __assign({ className: cnBreadcrumbs({ size: size, inverted: inverted }, [className]), ref: ref }, restProps),
        renderPages(head, true),
        maxCount && rest.length > 1 ? (React.createElement("li", { className: cnBreadcrumbs('Item') },
            delimiter,
            React.createElement("span", { className: cnBreadcrumbs('More') }, "..."))) : (renderPages(rest)),
        renderPages(tail)));
});
