"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
    var ownKeys = function(o) {
        ownKeys = Object.getOwnPropertyNames || function (o) {
            var ar = [];
            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
            return ar;
        };
        return ownKeys(o);
    };
    return function (mod) {
        if (mod && mod.__esModule) return mod;
        var result = {};
        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
        __setModuleDefault(result, mod);
        return result;
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
const eventUtils = __importStar(require("../../common/event-utils"));
const dom_1 = require("../../common/dom");
class Breadcrumbs {
    handleClick(originalEvent) {
        this.emit("select", { originalEvent, el: originalEvent === null || originalEvent === void 0 ? void 0 : originalEvent.target });
    }
    handleMenuBreadcrumb(originalEvent) {
        this.emit("select", { originalEvent, el: originalEvent === null || originalEvent === void 0 ? void 0 : originalEvent.el });
    }
    onCreate() {
        this.state = { hiddenIndex: [] };
    }
    onMount() {
        this._calculateMaxItems();
        this.subscribeTo(eventUtils.resizeUtil).on("resize", this._calculateMaxItems.bind(this));
    }
    onInput(input) {
        var _a;
        this.cachedWidths = [];
        const hiddenIndex = [];
        const items = [...((_a = input.item) !== null && _a !== void 0 ? _a : [])];
        if ((items || []).length > 4) {
            // If we have more than 4 items, we automatically add them into hiddenIndexes.
            // The first, second to last, and last indexes will be shown automatically
            for (let i = 1; i < items.length - 2; i++) {
                hiddenIndex.push(i);
            }
        }
        this.state.hiddenIndex = hiddenIndex;
        this.newInput = true;
    }
    onUpdate() {
        if (this.newInput) {
            this.newInput = false;
            this._calculateMaxItems();
        }
    }
    _getItemWidths(itemContainer) {
        let itemWidths = this.cachedWidths;
        if (itemWidths.length !== itemContainer.children.length) {
            itemWidths = [];
            for (let i = 0; i < itemContainer.children.length; i++) {
                const currentItem = itemContainer.children[i];
                // We need to remove the hidden attribute to get the width
                if (currentItem.hasAttribute("hidden")) {
                    currentItem.removeAttribute("hidden");
                    itemWidths[i] = currentItem.offsetWidth;
                    currentItem.setAttribute("hidden", "");
                }
                else {
                    itemWidths[i] = currentItem.offsetWidth;
                }
            }
            this.cachedWidths = itemWidths;
        }
        return itemWidths;
    }
    _calculateMaxItems() {
        var _a;
        const { input, state } = this;
        const items = [...((_a = input.item) !== null && _a !== void 0 ? _a : [])];
        if (!items.some((item) => !item.type)) {
            return;
        }
        const itemContainer = this.getEl("items");
        const maxWidth = (0, dom_1.getMaxWidth)(itemContainer);
        const lastItemIndex = itemContainer.children.length - 1;
        const itemWidths = this._getItemWidths(itemContainer);
        const hasOverflowMenu = state.hiddenIndex.length > 0;
        // Skip the first element
        let startRange = 1;
        // End at the item before the last
        const endRange = lastItemIndex - 1;
        // Only show a maximum of root + 3 other items.
        const indexCutoff = endRange - 2;
        // Get the total width of the first and last item
        let runningTotalWidth = itemWidths[0] + itemWidths[lastItemIndex];
        // When we show the overflow menu, it is now rendered within the dom.
        // This increases the number of items by 1 in itemsContainer
        if (hasOverflowMenu) {
            // Add overflow menu to the count and increse the start range
            runningTotalWidth += itemWidths[startRange];
            startRange++;
        }
        const hiddenIndex = [];
        // We only need to check the length of the second to last and third to last items.
        // All other items will be truncated automatically. (due to indexCutoff variable)
        for (let i = endRange; i >= startRange; i--) {
            runningTotalWidth += itemWidths[i];
            if (runningTotalWidth > maxWidth || indexCutoff >= i) {
                // Since the overflow menu will cause a shift in indexes, we need to fix that
                // So that the indexes match the input.items
                hiddenIndex.unshift(hasOverflowMenu ? i - 1 : i);
            }
        }
        state.hiddenIndex = hiddenIndex;
    }
}
module.exports = Breadcrumbs;
