'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useRef, useEffect } from 'react';
import { CaretRight } from '@phosphor-icons/react';
import { cn } from '@/lib/utils';
/**
 * Sidebar Group component - collapsible group with toggle
 * Arrow on right side with smooth rotation and expand animations
 */ export function SidebarGroup({ title, children, defaultOpen = false, selected = false, indent = 0, onClick, asideContent, selectedChildSlug }) {
    const [isOpen, setIsOpen] = useState(defaultOpen);
    const contentRef = useRef(null);
    const [contentHeight, setContentHeight] = useState(defaultOpen ? undefined : 0);
    // Auto-expand when a child is selected (e.g., via agent navigation)
    // Triggers on defaultOpen change OR when selectedChildSlug changes (even if defaultOpen stays true)
    useEffect(()=>{
        if (defaultOpen) {
            setIsOpen(true);
        }
    }, [
        defaultOpen,
        selectedChildSlug
    ]);
    // Update height when open state changes
    useEffect(()=>{
        if (isOpen) {
            const height = contentRef.current?.scrollHeight;
            setContentHeight(height);
            // After animation, set to auto for dynamic content
            const timer = setTimeout(()=>setContentHeight(undefined), 200);
            return ()=>clearTimeout(timer);
        } else {
            // First set the current height, then animate to 0
            const height = contentRef.current?.scrollHeight;
            setContentHeight(height);
            requestAnimationFrame(()=>{
                setContentHeight(0);
            });
        }
    }, [
        isOpen
    ]);
    const handleToggle = ()=>{
        setIsOpen(!isOpen);
        onClick?.();
    };
    return /*#__PURE__*/ _jsxs("li", {
        className: "docs-sidebar-group flex flex-col",
        children: [
            /*#__PURE__*/ _jsxs("button", {
                type: "button",
                "aria-expanded": isOpen,
                onClick: handleToggle,
                className: cn(// Base styles
                'docs-sidebar-group-toggle group/button flex items-center rounded-lg px-3 py-2 w-full text-left', 'text-sm leading-5 transition-colors duration-150', // State variants
                selected ? 'docs-sidebar-group-active bg-sidebar-primary text-sidebar-primary-foreground font-medium' : 'text-sidebar-foreground/80 hover:bg-sidebar-accent/30 hover:text-sidebar-foreground'),
                style: {
                    paddingLeft: indent > 0 ? `${indent * 12 + 12}px` : undefined
                },
                children: [
                    /*#__PURE__*/ _jsx("span", {
                        className: "flex-1 truncate font-medium",
                        children: title
                    }),
                    asideContent && /*#__PURE__*/ _jsx("span", {
                        className: "ml-2 shrink-0",
                        children: asideContent
                    }),
                    /*#__PURE__*/ _jsx("span", {
                        className: "docs-sidebar-group-icon ml-2 text-sidebar-foreground/50 group-hover/button:text-sidebar-foreground/70",
                        children: /*#__PURE__*/ _jsx(CaretRight, {
                            weight: "bold",
                            className: cn("h-3.5 w-3.5 transition-transform duration-200 ease-out", isOpen && "rotate-90")
                        })
                    })
                ]
            }),
            /*#__PURE__*/ _jsx("ul", {
                ref: contentRef,
                className: cn("docs-sidebar-group-items flex flex-col overflow-hidden transition-all duration-200 ease-out", !isOpen && "opacity-0", isOpen && "opacity-100"),
                style: {
                    height: contentHeight !== undefined ? `${contentHeight}px` : 'auto'
                },
                children: children
            })
        ]
    });
}
