/**
 * RfiOptionTagSelector — Multi-select for picking which ClarificationResponseOptions
 * to include when sending back to the client.
 *
 * Shows selected options as removable tag pills. Dropdown lists available options
 * with checkboxes.
 */
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useRef, useCallback, useEffect } from 'react';
import { cn } from '../../utils/cn.js';
import { IoClose, IoChevronDown } from 'react-icons/io5';
export function RfiOptionTagSelector({ available_options, selected_options, on_change, disabled, className, }) {
    const [open, set_open] = useState(false);
    const container_ref = useRef(null);
    const selected_values = new Set(selected_options.map(o => o.value));
    const toggle_option = useCallback((option) => {
        if (selected_values.has(option.value)) {
            on_change(selected_options.filter(o => o.value !== option.value));
        }
        else {
            on_change([...selected_options, option]);
        }
    }, [selected_options, selected_values, on_change]);
    const remove_option = useCallback((value) => {
        on_change(selected_options.filter(o => o.value !== value));
    }, [selected_options, on_change]);
    // Close on outside click
    useEffect(() => {
        if (!open)
            return;
        const handle_click = (e) => {
            if (container_ref.current && !container_ref.current.contains(e.target)) {
                set_open(false);
            }
        };
        document.addEventListener('mousedown', handle_click);
        return () => document.removeEventListener('mousedown', handle_click);
    }, [open]);
    return (_jsxs("div", { ref: container_ref, className: cn('relative', className), children: [selected_options.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-1.5 mb-2", children: selected_options.map(opt => (_jsxs("span", { className: "inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800 border border-blue-200", children: [opt.label, !disabled && (_jsx("button", { type: "button", onClick: () => remove_option(opt.value), className: "hover:text-blue-600 transition-colors", children: _jsx(IoClose, { className: "w-3 h-3" }) }))] }, opt.value))) })), _jsxs("button", { type: "button", onClick: () => !disabled && set_open(!open), disabled: disabled, className: cn('w-full flex items-center justify-between px-3 py-2 text-sm border rounded-md bg-background', 'hover:bg-muted/50 transition-colors', 'disabled:opacity-50 disabled:cursor-not-allowed', open && 'ring-2 ring-ring'), children: [_jsx("span", { className: "text-muted-foreground", children: selected_options.length === 0
                            ? 'Select response options for client...'
                            : `${selected_options.length} option${selected_options.length !== 1 ? 's' : ''} selected` }), _jsx(IoChevronDown, { className: cn('w-4 h-4 text-muted-foreground transition-transform', open && 'rotate-180') })] }), open && (_jsx("div", { className: "absolute z-50 mt-1 w-full rounded-md border bg-popover shadow-md", children: _jsxs("div", { className: "py-1 max-h-48 overflow-y-auto", children: [available_options.map(opt => {
                            const checked = selected_values.has(opt.value);
                            return (_jsxs("button", { type: "button", onClick: () => toggle_option(opt), className: "w-full flex items-start gap-2.5 px-3 py-2 text-sm hover:bg-muted/50 transition-colors text-left", children: [_jsx("input", { type: "checkbox", checked: checked, readOnly: true, className: "mt-0.5 accent-blue-600" }), _jsxs("div", { children: [_jsx("span", { className: "font-medium text-foreground", children: opt.label }), opt.description && (_jsxs("span", { className: "text-xs text-muted-foreground ml-1.5", children: ["\u2014 ", opt.description] }))] })] }, opt.value));
                        }), available_options.length === 0 && (_jsx("p", { className: "px-3 py-2 text-sm text-muted-foreground italic", children: "No options available" }))] }) }))] }));
}
//# sourceMappingURL=rfi_option_tag_selector.js.map