import { __assign, __read, __rest } from "tslib";
import React, { useEffect, useRef, useState } from "react";
import Tooltip from "../Tooltip";
import getTextWidth from "../utils/getTextWidth";
import { useStateProps } from "../hooks/useStateProps";
import useDebounce from "../hooks/useDebounce";
import { BreadcrumbsWrapper, Divider, IconWrapper, ItemWrapper, Text } from "./style";
var Breadcrumbs = function (_a) {
    var children = _a.children, items = _a.items, _b = _a.maxNoCollapsedItems, maxNoCollapsedItems = _b === void 0 ? 1 : _b, className = _a.className, _c = _a.testId, testId = _c === void 0 ? "breadcrumbs" : _c, props = __rest(_a, ["children", "items", "maxNoCollapsedItems", "className", "testId"]);
    var breadcrumbsRef = useRef(null);
    var _d = __read(useState(false), 2), isLastChildEllipsis = _d[0], setIsLastChildEllipsis = _d[1];
    var _e = __read(useStateProps(maxNoCollapsedItems), 2), _maxNoCollapsedItems = _e[0], setMaxNoCollapsedItems = _e[1];
    var _f = __read(useState("unset"), 2), widthLastNodeElement = _f[0], setWidthLastNodeElement = _f[1];
    var getDeltaScroll = function () {
        var _breadcrumbs = breadcrumbsRef.current;
        var parent = _breadcrumbs.parentNode;
        var deltaScrollBody = parent.scrollWidth - document.body.offsetWidth;
        var deltaScrollBreadcrumbs = _breadcrumbs.scrollWidth - _breadcrumbs.offsetWidth;
        return Math.max(deltaScrollBody, deltaScrollBreadcrumbs);
    };
    var collapsedLastItem = function () {
        setWidthLastNodeElement("unset");
        setMaxNoCollapsedItems(_maxNoCollapsedItems - 1);
        setIsLastChildEllipsis(false);
    };
    var adaptSize = function () {
        if (!breadcrumbsRef.current || maxNoCollapsedItems === 0) {
            return;
        }
        var font = getComputedStyle(breadcrumbsRef.current).font;
        var minWidthTextForLastChild = 40;
        var childNodes = breadcrumbsRef.current.childNodes;
        var lastChildNode = childNodes.item(childNodes.length - 1);
        var _a = lastChildNode.getBoundingClientRect(), widthLastChild = _a.width, rightLastChild = _a.right, leftLastChild = _a.left;
        var rightBreadcrumbs = breadcrumbsRef.current.getBoundingClientRect().right;
        var deltaScroll = getDeltaScroll();
        if (deltaScroll > 0 && _maxNoCollapsedItems > 1) {
            for (var i = 0; _maxNoCollapsedItems - i > 1; i++) {
                if (deltaScroll <= 0) {
                    return;
                }
                var item = items[items.length - _maxNoCollapsedItems - i];
                deltaScroll -= getTextWidth(item.text || "", font);
                setMaxNoCollapsedItems(_maxNoCollapsedItems - 1);
            }
        }
        if (_maxNoCollapsedItems === 1) {
            var newWidthLastChild = void 0;
            var iconWidth = items[items.length - 1].icon ? 32 : 0;
            if (deltaScroll <= 0) {
                newWidthLastChild = rightBreadcrumbs - leftLastChild;
            }
            else {
                newWidthLastChild = widthLastChild - deltaScroll * 2;
            }
            var newWidthText = newWidthLastChild - iconWidth;
            var maxWidthText = getTextWidth(items[items.length - 1].text || "", font);
            if (newWidthText >= maxWidthText) {
                setWidthLastNodeElement("unset");
            }
            else if (newWidthText < minWidthTextForLastChild) {
                collapsedLastItem();
            }
            else {
                setWidthLastNodeElement(newWidthLastChild);
                !isLastChildEllipsis && setIsLastChildEllipsis(true);
            }
        }
        if (_maxNoCollapsedItems === 0) {
            var freeSpace = rightBreadcrumbs - rightLastChild;
            if (freeSpace >= minWidthTextForLastChild) {
                setIsLastChildEllipsis(true);
                setMaxNoCollapsedItems(_maxNoCollapsedItems + 1);
            }
        }
        if (rightLastChild < rightBreadcrumbs &&
            _maxNoCollapsedItems > 0 &&
            _maxNoCollapsedItems < maxNoCollapsedItems) {
            var lastCollapsedItem = items[items.length - _maxNoCollapsedItems - 1];
            var widthTextLastCollapsedItem = getTextWidth(lastCollapsedItem.text || "", font);
            var newWidthBreadcrumbs = rightLastChild + widthTextLastCollapsedItem;
            if (newWidthBreadcrumbs <= rightBreadcrumbs) {
                if (_maxNoCollapsedItems === 1) {
                    setIsLastChildEllipsis(false);
                    setWidthLastNodeElement("unset");
                }
                setMaxNoCollapsedItems(_maxNoCollapsedItems + 1);
            }
        }
    };
    var adaptSizeDebounce = useDebounce(adaptSize, 100);
    useEffect(function () {
        adaptSize();
    }, [_maxNoCollapsedItems]);
    useEffect(function () {
        window.addEventListener("resize", adaptSizeDebounce);
        return function () { return window.removeEventListener("resize", adaptSizeDebounce); };
    });
    return (React.createElement(BreadcrumbsWrapper, __assign({ "data-testid": testId, className: className, widthLastNodeElement: widthLastNodeElement, ref: breadcrumbsRef }, props, { isLastChildEllipsis: isLastChildEllipsis }),
        items.map(function (item, index) { return (React.createElement(React.Fragment, { key: "" + (item.text || item.to || "") + (item.viewType || "") },
            index > 0 && React.createElement(Divider, { type: "corvus" }, "/"),
            React.createElement(Tooltip, { text: item.text || "", direction: index === items.length - 1 &&
                    (isLastChildEllipsis || _maxNoCollapsedItems === 0)
                    ? "bottomRight"
                    : "bottomLeft", isShow: Boolean((index < items.length - _maxNoCollapsedItems &&
                    item.icon &&
                    item.text) ||
                    (index === items.length - 1 && isLastChildEllipsis)) },
                React.createElement(ItemWrapper, { isDisabled: item.isDisabled, viewType: item.viewType, as: item.to && "a", href: item.to || "", onClick: function (e) { return item.onClick && item.onClick(e, item); } },
                    item.icon && item.iconType !== "trail" && (React.createElement(IconWrapper, null, item.icon)),
                    !(index < items.length - _maxNoCollapsedItems && item.icon) &&
                        item.text && React.createElement(Text, { type: "corvus" }, item.text),
                    item.icon && item.iconType === "trail" && (React.createElement(IconWrapper, null, item.icon)))))); }),
        children));
};
Breadcrumbs.displayName = "Breadcrumbs";
export default Breadcrumbs;
