'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
export function SelectField({ label, value, onChange, options = [], multi = false, required, helpText, }) {
    const [searchTerm, setSearchTerm] = useState('');
    const [open, setOpen] = useState(false);
    const selectedValues = multi ? (Array.isArray(value) ? value : []) : [];
    const singleValue = multi ? '' : typeof value === 'string' ? value : '';
    const filtered = options.filter((opt) => opt.toLowerCase().includes(searchTerm.toLowerCase()));
    function handleSelect(opt) {
        if (multi) {
            const next = selectedValues.includes(opt)
                ? selectedValues.filter((v) => v !== opt)
                : [...selectedValues, opt];
            onChange(next);
        }
        else {
            onChange(opt);
            setOpen(false);
        }
    }
    return (_jsxs("div", { className: "relative", children: [_jsxs("label", { className: "mb-1 block text-sm font-medium", children: [label, required && _jsx("span", { className: "ml-0.5 text-[var(--destructive)]", children: "*" })] }), _jsxs("button", { type: "button", onClick: () => setOpen((o) => !o), className: "flex w-full items-center justify-between rounded-md border border-[var(--border)] bg-[var(--input-background)] px-3 py-2 text-sm", children: [_jsx("span", { className: singleValue || selectedValues.length ? '' : 'text-[var(--muted-foreground)]', children: multi
                            ? selectedValues.length
                                ? `${selectedValues.length} selected`
                                : 'Select...'
                            : singleValue || 'Select...' }), _jsx("svg", { className: "h-4 w-4 text-[var(--muted-foreground)]", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) })] }), open && (_jsxs("div", { className: "absolute z-50 mt-1 w-full rounded-md border border-[var(--border)] bg-[var(--popover)] shadow-lg", children: [_jsx("div", { className: "border-b border-[var(--border)] p-2", children: _jsx("input", { type: "text", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), placeholder: "Search...", className: "w-full rounded bg-[var(--input-background)] px-2 py-1 text-sm outline-none" }) }), _jsxs("ul", { className: "max-h-48 overflow-y-auto py-1", children: [filtered.map((opt) => {
                                const isSelected = multi ? selectedValues.includes(opt) : singleValue === opt;
                                return (_jsx("li", { children: _jsxs("button", { type: "button", onClick: () => handleSelect(opt), className: `flex w-full items-center gap-2 px-3 py-1.5 text-sm hover:bg-[var(--accent)] ${isSelected ? 'font-medium' : ''}`, children: [multi && (_jsx("span", { className: `flex h-4 w-4 items-center justify-center rounded border ${isSelected
                                                    ? 'border-[var(--primary)] bg-[var(--primary)] text-[var(--primary-foreground)]'
                                                    : 'border-[var(--border)]'}`, children: isSelected && '✓' })), opt] }) }, opt));
                            }), filtered.length === 0 && (_jsx("li", { className: "px-3 py-2 text-sm text-[var(--muted-foreground)]", children: "No options found" }))] })] })), helpText && _jsx("p", { className: "mt-1 text-xs text-[var(--muted-foreground)]", children: helpText })] }));
}
//# sourceMappingURL=SelectField.js.map