import { jsx as _jsx } from "react/jsx-runtime";
import { memo, useMemo, useCallback, useEffect, useRef } from 'react';
import { useSessions } from '../../hooks/useSessions';
import { SessionItem } from './SessionItem';
import { useFocusStore } from '../../stores/focusStore';
export const SessionListContainer = memo(function SessionListContainer({ activeSessionId, onSelectSession, }) {
    const { data: sessions = [], isLoading } = useSessions();
    const { currentFocus, sessionIndex } = useFocusStore();
    const itemRefs = useRef(new Map());
    const handleSessionClick = useCallback((sessionId) => {
        onSelectSession(sessionId);
    }, [onSelectSession]);
    // Create a stable reference that only changes when session count, titles, or agents change
    const sessionSnapshot = useMemo(() => {
        return sessions.map((s) => ({
            id: s.id,
            title: s.title,
            agent: s.agent,
            createdAt: s.createdAt,
        }));
    }, [sessions]);
    useEffect(() => {
        if (currentFocus === 'sessions') {
            const element = itemRefs.current.get(sessionIndex);
            element?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
        }
    }, [currentFocus, sessionIndex]);
    if (isLoading) {
        return (_jsx("div", { className: "px-4 py-8 text-center text-sm text-muted-foreground/80", children: "Loading sessions..." }));
    }
    if (sessionSnapshot.length === 0) {
        return (_jsx("div", { className: "px-4 py-8 text-center text-sm text-muted-foreground/80", children: "No sessions yet. Create one to get started." }));
    }
    return (_jsx("div", { className: "flex flex-col gap-1 px-2 py-2 overflow-y-auto scrollbar-hide", children: sessionSnapshot.map((session, index) => {
            const fullSession = sessions.find((s) => s.id === session.id);
            if (!fullSession)
                return null;
            const isFocused = currentFocus === 'sessions' && sessionIndex === index;
            return (_jsx("div", { ref: (el) => {
                    if (el)
                        itemRefs.current.set(index, el);
                    else
                        itemRefs.current.delete(index);
                }, className: isFocused ? 'ring-1 ring-primary/40 rounded-md' : '', children: _jsx(SessionItem, { session: fullSession, isActive: session.id === activeSessionId, onClick: () => handleSessionClick(session.id) }) }, session.id));
        }) }));
});
//# sourceMappingURL=SessionListContainer.js.map