"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Icon } from "../../../components/icon/index.js";
import { cn } from "../../../../scalars/lib/index.js";
import { AutoSizer, List } from "react-virtualized";
import { SidebarItem } from "./sidebar-item.js";
import { useSidebar } from "./sidebar-provider/index.js";
export const SidebarContentArea = ({ allowPinning, allowCollapsingInactiveNodes, }) => {
    const { flattenedNodes, toggleNode, togglePin, searchTerm, searchResults, activeSearchIndex, pinnedNodePath, activeNodeId, virtualListRef, onActiveNodeChange, } = useSidebar();
    const hasPinnedItems = allowPinning && pinnedNodePath.length > 0;
    const renderNode = ({ index, key, style, }) => {
        const node = flattenedNodes[index];
        return (_jsx(SidebarItem, { node: node, toggleNode: toggleNode, togglePin: togglePin, searchTerm: searchTerm, searchResults: searchResults, activeSearchIndex: activeSearchIndex, allowPinning: allowPinning ?? false, isActive: activeNodeId === node.id, onChange: onActiveNodeChange, style: style, allowCollapsingInactiveNodes: allowCollapsingInactiveNodes }, key));
    };
    return (_jsx("div", { className: cn("flex flex-1 flex-col gap-1 overflow-y-auto", hasPinnedItems && "pt-0.5"), children: flattenedNodes.length === 0 ? (_jsxs("div", { className: "flex max-w-full items-center gap-2 p-2 text-sm leading-5 text-gray-400 dark:text-gray-400", children: [_jsx(Icon, { name: "TreeViewSlash", size: 16, className: "min-w-4" }), _jsx("span", { className: "truncate", children: "This node is empty" })] })) : (_jsx("div", { className: "flex-1 overflow-hidden", children: _jsx(AutoSizer, { children: ({ width, height }) => (_jsx(List, { ref: virtualListRef, className: "p-2", width: width, height: height, rowCount: flattenedNodes.length, rowHeight: 32 + 8, rowRenderer: renderNode })) }) })) }));
};
//# sourceMappingURL=sidebar-content-area.js.map