"use client";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { Icon } from "@powerhousedao/design-system";
import { cn } from "#scalars";
import { useCallback, useEffect } from "react";
import { SidebarContentArea } from "./subcomponents/sidebar-content-area.js";
import { SidebarHeader } from "./subcomponents/sidebar-header.js";
import { SidebarPinningArea } from "./subcomponents/sidebar-pinning-area.js";
import { useSidebar } from "./subcomponents/sidebar-provider/index.js";
import { SidebarSearch } from "./subcomponents/sidebar-search/index.js";
import { useSidebarResize } from "./use-sidebar-resize.js";
import { triggerEvent } from "./utils.js";
/**
 * Sidebar component that provides a collapsible and resizable navigation panel
 * with support for hierarchical data, search, pinning, and custom styling.
 */
export const Sidebar = ({ activeNodeId, onActiveNodeChange, nodes, sidebarIcon, sidebarTitle, defaultLevel = 1, enableMacros = 0, allowPinning = true, resizable = true, showSearchBar = true, showStatusFilter = false, extraFooterContent, initialWidth = 300, maxWidth, allowCollapsingInactiveNodes = false, className, }) => {
    const { sidebarRef, startResizing, isResizing, isSidebarOpen, handleToggleSidebar, } = useSidebarResize({
        defaultWidth: initialWidth,
        minWidth: 220,
        maxWidth,
    });
    const { pinnedNodePath, setNodes, openLevel, togglePin, syncActiveNodeId, setActiveNodeChangeCallback, } = useSidebar();
    // Sync external nodes with internal state when provided
    useEffect(() => {
        if (nodes) {
            setNodes(nodes);
        }
    }, [nodes, setNodes]);
    // Initialize default expanded level on mount
    useEffect(() => {
        if (defaultLevel > 1) {
            openLevel(defaultLevel);
        }
        // openLevel is intentionally omitted from dependencies
        // to prevent infinite loop as it may change on each render
    }, [defaultLevel]);
    const handleActiveNodeChange = useCallback((node) => {
        onActiveNodeChange?.(node);
        triggerEvent("sidebar:change", { node }, sidebarRef.current);
    }, [onActiveNodeChange, sidebarRef]);
    // sync activeNodeId and onActiveNodeChange with provider state
    useEffect(() => {
        syncActiveNodeId(activeNodeId);
    }, [activeNodeId, syncActiveNodeId]);
    // Sync active node change callback with provider state
    useEffect(() => {
        setActiveNodeChangeCallback(handleActiveNodeChange);
    }, [handleActiveNodeChange, setActiveNodeChangeCallback]);
    // Unpin nodes if pinning is disabled
    useEffect(() => {
        const hasPinnedNodes = pinnedNodePath.length > 0;
        if (!allowPinning && hasPinnedNodes) {
            const lastPinnedNodeId = pinnedNodePath[pinnedNodePath.length - 1].id;
            togglePin(lastPinnedNodeId);
        }
    }, [allowPinning, pinnedNodePath, togglePin]);
    return (_jsxs("aside", { ref: sidebarRef, style: { width: "min(100%, var(--sidebar-width))" }, className: cn("group peer relative flex h-svh max-h-screen flex-col bg-gray-50 shadow-lg transition-[width] duration-75 ease-linear dark:bg-slate-600", isResizing && "transition-none", className), children: [isSidebarOpen && (_jsxs(_Fragment, { children: [_jsx(SidebarHeader, { sidebarTitle: sidebarTitle, sidebarIcon: sidebarIcon, enableMacros: enableMacros }), allowPinning && pinnedNodePath.length > 0 && _jsx(SidebarPinningArea, {}), _jsx(SidebarContentArea, { allowPinning: allowPinning, allowCollapsingInactiveNodes: allowCollapsingInactiveNodes }), showSearchBar && (_jsx(SidebarSearch, { showStatusFilter: showStatusFilter })), extraFooterContent && (_jsx("div", { className: "w-full border-t border-gray-300 p-2 dark:border-gray-800", children: extraFooterContent }))] })), resizable && (_jsx("div", { className: "group/sidebar-resizer absolute right-0 top-0 h-full w-[10px] translate-x-1/2 cursor-ew-resize select-none", onMouseDown: startResizing, children: _jsx("div", { className: cn("relative h-full w-px translate-x-[5px] transition-colors group-hover/sidebar-resizer:bg-gray-500 dark:group-hover/sidebar-resizer:bg-gray-600", isResizing && "cursor-default bg-blue-500", !isSidebarOpen && "bg-gray-300 dark:bg-gray-600"), children: _jsx("button", { type: "button", className: cn("absolute right-0 top-14 size-4 translate-x-1/2 rounded-full bg-gray-500 dark:bg-gray-900", "opacity-0 transition-opacity group-hover/sidebar-resizer:opacity-100"), onClick: handleToggleSidebar, children: _jsx(Icon, { name: "Caret", size: 16, className: cn("min-w-4 text-gray-50 dark:text-gray-500", {
                                "-rotate-180": isSidebarOpen,
                            }) }) }) }) }))] }));
};
//# sourceMappingURL=sidebar.js.map