import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import clsx from 'clsx';
import { ChevronRight, Info } from 'lucide-react';
import { VTooltip, Breadcrumbs } from '@vertesia/ui/core';
import { capitalize } from 'lodash-es';
import { useNavigate } from '@vertesia/ui/router';
export function GenericPageNavHeader({ className, children, title, description, actions, breadcrumbs, isCompact = false, useDynamicBreadcrumbs = true }) {
    const navigate = useNavigate();
    const buildBreadcrumbLabel = (entry) => {
        const href = entry?.href || '';
        if (!href)
            return 'Page';
        const cleanHref = href.split('#')[0].split('?')[0];
        const pathSegments = cleanHref.split('/').filter((segment) => segment.length > 0);
        if (pathSegments.length === 3) {
            const secondSegment = pathSegments[1];
            return `${capitalize(secondSegment)} Detail`;
        }
        else if (pathSegments.length >= 2) {
            return capitalize(pathSegments[pathSegments.length - 1]);
        }
        else if (pathSegments.length === 1) {
            return capitalize(pathSegments[0]);
        }
        return 'Page';
    };
    // Build breadcrumb items from history chain and current breadcrumbs
    const buildBreadcrumbItems = () => {
        const items = [];
        // Add items from history chain
        if (useDynamicBreadcrumbs && typeof window !== 'undefined' && window.history.state?.historyChain) {
            const historyChain = window.history.state.historyChain;
            historyChain.forEach((entry, index) => {
                const stepsBack = historyChain.length - index;
                items.push({
                    label: buildBreadcrumbLabel(entry),
                    href: entry.href,
                    onClick: () => window.history.go(-stepsBack)
                });
            });
        }
        // Add current page breadcrumbs
        if (breadcrumbs && breadcrumbs.length > 0) {
            breadcrumbs.forEach((breadcrumb) => {
                // Extract text content from React element
                const label = typeof breadcrumb?.props?.children === 'string'
                    ? breadcrumb.props.children
                    : 'Page';
                items.push((breadcrumb?.props?.href) ? {
                    href: breadcrumb?.props?.href,
                    label: label,
                    onClick: () => navigate(breadcrumb.props.href, { replace: breadcrumb.props.clearBreadcrumbs }),
                } : {
                    label: label
                });
            });
        }
        return items;
    };
    const breadcrumbItems = buildBreadcrumbItems();
    return (_jsxs("div", { className: clsx(isCompact ? 'pb-0' : 'pb-2', 'p-4 flex flex-col', className), children: [_jsxs("div", { className: 'flex items-start gap-4', children: [_jsxs("div", { className: "w-full flex place-content-between h-auto min-h-8 flex-col items-start", children: [_jsx("nav", { className: "flex-1 flex justify-start text-xs", children: breadcrumbItems.length > 0 && (_jsx(Breadcrumbs, { path: breadcrumbItems, separator: _jsx(ChevronRight, { className: "w-3.5 h-3.5" }), maxItems: 4 })) }), _jsxs("div", { className: 'flex gap-2 items-center', children: [_jsx("h1", { className: "text-xl font-semibold break-all", children: title }), description &&
                                        _jsx(VTooltip, { description: description, children: _jsx(Info, { className: "size-4 text-muted" }) })] })] }), _jsx("div", { className: "flex gap-x-2 shrink-0", children: actions })] }), children && _jsx("div", { className: "w-full flex items-center", children: children })] }));
}
//# sourceMappingURL=GenericPageNavHeader.js.map