import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { memo } from 'react';
import { Terminal, ChevronRight, Plus } from 'lucide-react';
import { Button } from '../ui/Button';
import { useTerminalStore } from '../../stores/terminalStore';
import { useTerminals, useCreateTerminal } from '../../hooks/useTerminals';
import { TerminalList } from './TerminalList';
import { TerminalViewer } from './TerminalViewer';
export const TerminalsSidebar = memo(function TerminalsSidebar() {
    const isExpanded = useTerminalStore((state) => state.isExpanded);
    const collapseSidebar = useTerminalStore((state) => state.collapseSidebar);
    const selectedTerminalId = useTerminalStore((state) => state.selectedTerminalId);
    const selectTerminal = useTerminalStore((state) => state.selectTerminal);
    const expandSidebar = useTerminalStore((state) => state.expandSidebar);
    const { data: terminals, isLoading } = useTerminals();
    const createTerminal = useCreateTerminal();
    const handleNewTerminal = async () => {
        try {
            const result = await createTerminal.mutateAsync({
                command: 'bash',
                purpose: 'Manual shell',
            });
            selectTerminal(result.terminalId);
            expandSidebar();
        }
        catch (error) {
            console.error('Failed to create terminal:', error);
        }
    };
    if (!isExpanded)
        return null;
    return (_jsxs("div", { className: "w-80 border-l border-border bg-background flex flex-col h-full", children: [_jsxs("div", { className: "h-14 border-b border-border px-4 flex items-center justify-between shrink-0", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Terminal, { className: "w-4 h-4" }), _jsx("span", { className: "font-medium", children: "Terminals" }), terminals && terminals.count > 0 && (_jsxs("span", { className: "text-xs text-muted-foreground", children: ["(", terminals.count, ")"] }))] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { variant: "ghost", size: "icon", onClick: handleNewTerminal, title: "New terminal", disabled: createTerminal.isPending, children: _jsx(Plus, { className: "w-4 h-4" }) }), _jsx(Button, { variant: "ghost", size: "icon", onClick: collapseSidebar, children: _jsx(ChevronRight, { className: "w-4 h-4" }) })] })] }), _jsx("div", { className: "flex-1 overflow-hidden flex flex-col", children: selectedTerminalId ? (_jsx(TerminalViewer, { terminalId: selectedTerminalId })) : (_jsx(TerminalList, { terminals: terminals?.terminals ?? [], isLoading: isLoading })) })] }));
});
//# sourceMappingURL=TerminalsSidebar.js.map