'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * Area combobox - shadcn Popover + Command for area selection with create-new support
 */
import { useState } from 'react';
import * as PopoverPrimitive from '@radix-ui/react-popover';
import { HiCheck, HiSelector, HiPlus } from 'react-icons/hi';
import { cn } from '../../../utils/cn.js';
export function AreaCombobox({ value, on_change, areas, placeholder = 'Select area...', disabled = false, className, }) {
    const [open, set_open] = useState(false);
    const [input_value, set_input_value] = useState('');
    const filtered_areas = areas.filter(area => area.toLowerCase().includes(input_value.toLowerCase()));
    const show_create = input_value.trim() && !areas.includes(input_value.trim());
    const handle_select = (area) => {
        on_change(area);
        set_open(false);
        set_input_value('');
    };
    const handle_create = () => {
        const new_area = input_value.trim().toLowerCase().replace(/\s+/g, '_').replace(/[^a-z0-9_]/g, '');
        if (new_area) {
            handle_select(new_area);
        }
    };
    return (_jsxs(PopoverPrimitive.Root, { open: open, onOpenChange: set_open, modal: true, children: [_jsx(PopoverPrimitive.Trigger, { asChild: true, children: _jsxs("button", { type: "button", disabled: disabled, className: cn('flex items-center justify-between w-full px-3 py-2 border rounded-md text-sm', 'hover:bg-muted/50 transition-colors', disabled && 'opacity-50 cursor-not-allowed', className), children: [_jsx("span", { className: value ? '' : 'text-muted-foreground', children: value || placeholder }), _jsx(HiSelector, { className: "h-4 w-4 text-muted-foreground ml-2 flex-shrink-0" })] }) }), _jsx(PopoverPrimitive.Portal, { children: _jsxs(PopoverPrimitive.Content, { align: "start", sideOffset: 4, className: "z-50 w-[--radix-popover-trigger-width] min-w-[200px] rounded-md border bg-popover p-1 shadow-md", style: { backgroundColor: 'hsl(var(--popover))' }, children: [_jsx("input", { type: "text", value: input_value, onChange: (e) => set_input_value(e.target.value), placeholder: "Search or create area...", className: "w-full px-2 py-1.5 text-sm border-b outline-none bg-transparent", autoFocus: true }), _jsxs("div", { className: "max-h-48 overflow-auto py-1", children: [_jsxs("button", { onClick: () => handle_select(''), className: "flex items-center w-full px-2 py-1.5 text-sm rounded-sm hover:bg-accent transition-colors", children: [_jsx(HiCheck, { className: cn('h-4 w-4 mr-2 flex-shrink-0', !value ? 'opacity-100' : 'opacity-0') }), _jsx("span", { className: "text-muted-foreground", children: "All Areas" })] }), filtered_areas.map(area => (_jsxs("button", { onClick: () => handle_select(area), className: "flex items-center w-full px-2 py-1.5 text-sm rounded-sm hover:bg-accent transition-colors", children: [_jsx(HiCheck, { className: cn('h-4 w-4 mr-2 flex-shrink-0', value === area ? 'opacity-100' : 'opacity-0') }), area] }, area))), show_create && (_jsxs("button", { onClick: handle_create, className: "flex items-center w-full px-2 py-1.5 text-sm rounded-sm hover:bg-accent transition-colors text-primary", children: [_jsx(HiPlus, { className: "h-4 w-4 mr-2 flex-shrink-0" }), "Create \"", input_value.trim(), "\""] })), filtered_areas.length === 0 && !show_create && (_jsx("div", { className: "px-2 py-4 text-sm text-muted-foreground text-center", children: "No areas found" }))] })] }) })] }));
}
//# sourceMappingURL=area_combobox.js.map