import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useRef, useState } from "react";
import { Checkbox } from "../../checkbox";
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from "../../command";
import { Popover, PopoverContent, PopoverTrigger } from "../../popover";
import { AnimateChangeInHeight } from "../animateChangeInHeight";
import { DynamicLabel } from "../DynamicLabel";
export const SelectionCombobox = ({ filterType, filterValues, setFilterValues, options, labelRenderer, }) => {
    const [open, setOpen] = useState(false);
    const [commandInput, setCommandInput] = useState("");
    const commandInputRef = useRef(null);
    const nonSelectedFilterValues = options?.filter((option) => !filterValues.some(filter => filter.value === option.value));
    return (_jsxs(Popover, { _open: open, onOpenChange: (open) => {
            setOpen(open);
            if (!open) {
                setTimeout(() => {
                    setCommandInput("");
                }, 200);
            }
        }, children: [_jsx(PopoverTrigger, { className: "rounded-none p-1 h-8 bg-muted hover:bg-muted/50 transition text-muted hover:text-primary shrink-0", children: _jsx("div", { className: "flex gap-1.5 items-center", children: filterValues?.length === 1 ? ((() => {
                        const option = filterValues[0];
                        return (_jsx(DynamicLabel, { value: option.value || '', labelRenderer: labelRenderer, fallbackLabel: option.label }));
                    })()) : (`${filterValues?.length} selected`) }) }), _jsx(PopoverContent, { className: "w-[300px] p-0", children: _jsx(AnimateChangeInHeight, { children: _jsxs(Command, { children: [_jsx(CommandInput, { placeholder: filterType, className: "h-9", value: commandInput, onInputCapture: (e) => {
                                    setCommandInput(e.currentTarget.value);
                                }, ref: commandInputRef }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "No results found." }), _jsx(CommandGroup, { children: filterValues.map((value) => {
                                            return (_jsxs(CommandItem, { className: "group flex gap-2 items-center", onSelect: () => {
                                                    setFilterValues(filterValues.filter((v) => v.value !== value.value));
                                                    setTimeout(() => {
                                                        setCommandInput("");
                                                    }, 200);
                                                    setOpen(false);
                                                }, children: [_jsx("input", { type: "checkbox", checked: true, onChange: () => { } }), _jsx(DynamicLabel, { value: value.value || '', labelRenderer: labelRenderer, fallbackLabel: value.label })] }, value.value));
                                        }) }), nonSelectedFilterValues?.length > 0 && (_jsxs(_Fragment, { children: [_jsx(CommandSeparator, {}), _jsx(CommandGroup, { children: nonSelectedFilterValues
                                                    .filter(option => String(option.label || option.value).toLowerCase().includes(commandInput.toLowerCase()))
                                                    .map((filter) => (_jsxs(CommandItem, { className: "group flex gap-2 items-center", value: String(filter.label || filter.value), onSelect: () => {
                                                        setFilterValues([...filterValues, {
                                                                value: filter.value,
                                                                label: filter.label
                                                            }]);
                                                        setTimeout(() => {
                                                            setCommandInput("");
                                                        }, 200);
                                                        setOpen(false);
                                                    }, children: [_jsx(Checkbox, { checked: false, className: "opacity-0 group-data-[selected=true]:opacity-100" }), _jsx("span", { className: "text-muted", children: _jsx(DynamicLabel, { value: filter.value || '', labelRenderer: filter.labelRenderer || labelRenderer, fallbackLabel: filter.label }) })] }, filter.value))) })] }))] })] }) }) })] }));
};
//# sourceMappingURL=SelectCombobox.js.map