var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import { jsx as _jsx } from "react/jsx-runtime";
import * as React from "react";
import { useEffect, useReducer, useState } from "react";
import { cn } from "@utils";
import { breadcrumbsVariants, breadcrumbsListVariants, breadcrumbsSeparatorVariants, breadcrumbsSvgIconVariants, breadcrumbsDotSeparatorVariants } from "./breadcrumbsVariants";
import { BreadcrumbItem } from "./breadcrumbItem";
import { ADPIcon, iconList } from "../adpIcon";
/**
 * Separator component for breadcrumb items
 */
const BreadcrumbSeparator = ({ separatorType = "arrow" }) => (_jsx("li", { className: cn(breadcrumbsSeparatorVariants({ separatorType })), "aria-hidden": "true", children: separatorType === "arrow" ? (_jsx(ADPIcon, { size: "xs", className: cn(breadcrumbsSvgIconVariants(), "rtl:rotate-180"), icon: iconList.rightArrow })) : (
    // Using Unicode character {"\u2022"} for the dot separator
    _jsx("span", { className: cn(breadcrumbsDotSeparatorVariants()), children: "\u2022" })) }));
/**
 * Breadcrumbs component for navigation
 */
export const Breadcrumbs = React.forwardRef((_a, ref) => {
    var { maxItems = 10, className, children, separatorType = "arrow" } = _a, props = __rest(_a, ["maxItems", "className", "children", "separatorType"]);
    const [showAll, toggleShowAll] = useReducer((state) => !state, false);
    const [crumbsList, setCrumbsList] = useState([]);
    const maxDisplayItems = Math.max(maxItems, 2);
    useEffect(() => {
        const crumbs = [];
        if (Array.isArray(children)) {
            const totalItems = children.length - 1;
            if ((totalItems < maxDisplayItems) || showAll) {
                for (let i = 0; i < totalItems; i++) {
                    if (!React.isValidElement(children[i])) {
                        return;
                    }
                    crumbs.push(React.cloneElement(children[i], { active: false, key: i }), _jsx(BreadcrumbSeparator, { separatorType: separatorType }, `separator${i}`));
                }
            }
            else {
                if (React.isValidElement(children[0])) {
                    crumbs.push(React.cloneElement(children[0], { active: false, key: "first-item" }), _jsx(BreadcrumbSeparator, { separatorType: separatorType }, "first-item-separator"));
                }
                crumbs.push(React.cloneElement(_jsx(BreadcrumbItem, { children: _jsx("button", { onClick: toggleShowAll, title: `${totalItems - maxDisplayItems + 1} more item(s)`, children: _jsx("span", { className: "text-base", children: "..." }) }) }), { active: false, key: "more-items" }), _jsx(BreadcrumbSeparator, { separatorType: separatorType }, "more-items-separator"));
                for (let j = totalItems - maxDisplayItems + 2; j < totalItems; j++) {
                    if (!React.isValidElement(children[j])) {
                        return;
                    }
                    crumbs.push(React.cloneElement(children[j], { active: false, key: j }), _jsx(BreadcrumbSeparator, { separatorType: separatorType }, `${j}-separator`));
                }
            }
            crumbs.push(React.cloneElement(children[totalItems], { active: true, key: "lastItem" }));
        }
        else if (React.isValidElement(children)) {
            const clone = React.cloneElement(children, { active: true });
            crumbs.push(clone);
        }
        setCrumbsList(crumbs);
    }, [children, maxDisplayItems, showAll, separatorType]);
    return (crumbsList === null || crumbsList === void 0 ? void 0 : crumbsList.length) > 0
        ? _jsx("nav", Object.assign({ ref: ref, "aria-label": "Breadcrumb", className: cn(breadcrumbsVariants(), className) }, props, { children: _jsx("ol", { className: cn(breadcrumbsListVariants()), children: crumbsList }) }))
        : null;
});
Breadcrumbs.displayName = "Breadcrumbs";
// Attach BreadcrumbItem as a property
Breadcrumbs.Item = BreadcrumbItem;
//# sourceMappingURL=breadcrumbs.js.map