import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { Check, ChevronDown, Eye, ShieldCheck, Zap, } from "lucide-react";
import { Button } from "../../../../components/ui/button";
import { Command, CommandGroup, CommandItem, CommandList, } from "../../../../components/ui/command";
import { Popover, PopoverContent, PopoverTrigger, } from "../../../../components/ui/popover";
import { cn } from "../../../../lib/utils";
const COMPACT_TERMINAL_WIDTH = 420;
const defaultModeMeta = {
    Icon: ShieldCheck,
    activeClassName: "text-neutral-grey-100 hover:text-neutral-grey-100 hover:bg-neutral-grey-10! bg-transparent!",
};
const modeIconMeta = {
    supervised: defaultModeMeta,
    autonomous: {
        Icon: Zap,
        activeClassName: "text-feedback-red hover:text-feedback-red hover:bg-neutral-grey-10! bg-transparent!",
    },
    "read-only": {
        Icon: Eye,
        activeClassName: "text-neutral-grey-100 hover:text-neutral-grey-100 hover:bg-neutral-grey-10! bg-transparent!",
    },
};
function getModeMeta(mode) {
    return modeIconMeta[mode] ?? defaultModeMeta;
}
export function AgentModeSelector({ mode, options, readOnly, onModeChange, }) {
    const [open, setOpen] = useState(false);
    const [isCompact, setIsCompact] = useState(false);
    const [triggerWidth, setTriggerWidth] = useState();
    const [portalContainer, setPortalContainer] = useState(null);
    const rootRef = useRef(null);
    const triggerRef = useRef(null);
    const selectedOption = useMemo(() => options.find((option) => option.value === mode), [mode, options]);
    const selectedLabel = selectedOption?.label ?? mode;
    const selectedMeta = getModeMeta(mode);
    const SelectedIcon = selectedMeta.Icon;
    useEffect(() => {
        const root = rootRef.current;
        if (!root || typeof ResizeObserver === "undefined")
            return;
        const terminalRoot = root.closest("[data-agent-terminal-root]") ??
            root.parentElement;
        if (!terminalRoot)
            return;
        const updateCompactState = (width) => {
            if (width > 0) {
                setIsCompact(width < COMPACT_TERMINAL_WIDTH);
            }
        };
        updateCompactState(terminalRoot.getBoundingClientRect().width);
        const observer = new ResizeObserver((entries) => {
            updateCompactState(entries[0]?.contentRect.width ??
                terminalRoot.getBoundingClientRect().width);
        });
        observer.observe(terminalRoot);
        return () => observer.disconnect();
    }, []);
    const handleOpenChange = useCallback((nextOpen) => {
        if (nextOpen && triggerRef.current) {
            setTriggerWidth(triggerRef.current.offsetWidth);
            const dialogContent = triggerRef.current.closest('[data-slot="dialog-content"]');
            setPortalContainer(dialogContent);
        }
        setOpen(nextOpen);
    }, []);
    const handleSelect = useCallback((value) => {
        setOpen(false);
        void onModeChange(value);
    }, [onModeChange]);
    return (_jsx("div", { ref: rootRef, className: "shrink-0", children: _jsxs(Popover, { open: open, onOpenChange: handleOpenChange, enableIframeClickDetection: false, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { ref: triggerRef, variant: "outline", size: isCompact ? "iconSm" : "xs", disabled: readOnly, "data-testid": "agent-mode-selector", className: cn("focus-visible:border-neutral-grey-100 h-8 rounded-md border-0 text-[12px] font-normal shadow-none", isCompact
                            ? "size-8 min-w-0 p-0"
                            : "w-auto min-w-[128px] gap-1.5 px-2", selectedMeta.activeClassName), title: `${selectedLabel} mode`, "aria-label": `${selectedLabel} mode`, "aria-expanded": open, children: [_jsxs("span", { className: cn("flex min-w-0 items-center", isCompact ? "justify-center" : "gap-1.5"), children: [_jsx(SelectedIcon, { className: "size-4 shrink-0", strokeWidth: 1 }), isCompact ? (_jsx("span", { className: "sr-only", children: selectedLabel })) : (_jsx("span", { className: "truncate", children: selectedLabel }))] }), !isCompact ? (_jsx(ChevronDown, { strokeWidth: 1, className: "text-neutral-grey-100 size-3 shrink-0" })) : null] }) }), _jsx(PopoverContent, { className: "p-0 text-xs", align: "start", sideOffset: 4, style: {
                        minWidth: triggerWidth
                            ? `${Math.max(triggerWidth, 240)}px`
                            : "240px",
                        maxWidth: "280px",
                        width: "auto",
                    }, container: portalContainer, onMouseDown: (event) => event.stopPropagation(), onClick: (event) => event.stopPropagation(), children: _jsx(Command, { className: "w-full", children: _jsx(CommandList, { className: "max-h-[300px] w-full", children: _jsx(CommandGroup, { children: options.map((option) => {
                                    const optionMeta = getModeMeta(option.value);
                                    const OptionIcon = optionMeta.Icon;
                                    return (_jsxs(CommandItem, { value: option.value, keywords: [option.label], onSelect: () => handleSelect(option.value), disabled: option.disabled, className: "flex items-start justify-between gap-3 p-2", children: [_jsxs("div", { className: "flex min-w-0 items-start gap-2", children: [_jsx(OptionIcon, { className: "text-neutral-grey-100 mt-0.5 size-4 shrink-0", strokeWidth: 1 }), _jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [_jsx("span", { className: "text-neutral-grey-100 font-normal whitespace-normal", children: option.label }), option.description ? (_jsx("div", { className: "text-neutral-grey-50 text-[10px] leading-tight whitespace-normal opacity-90", children: option.description })) : null] })] }), _jsx(Check, { className: cn("mt-0.5 size-4 shrink-0", mode === option.value ? "opacity-100" : "opacity-0"), strokeWidth: 1 })] }, option.value));
                                }) }) }) }) })] }) }));
}
//# sourceMappingURL=AgentModeSelector.js.map