import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from "react";
import { Button } from "../../button";
import { Popover, PopoverContent, PopoverTrigger } from "../../popover";
import { InputList } from "../../../index";
export const StringListCombobox = ({ filterType, filterValues, setFilterValues, }) => {
    const [open, setOpen] = useState(false);
    const [tags, setTags] = useState(filterValues);
    const handleApply = () => {
        setFilterValues(tags);
        setOpen(false);
    };
    return (_jsxs(Popover, { _open: open, onOpenChange: (open) => {
            setOpen(open);
            if (!open && JSON.stringify(tags) !== JSON.stringify(filterValues)) {
                setTags(filterValues);
            }
        }, children: [_jsx(PopoverTrigger, { className: "rounded-none p-1 h-8 bg-muted hover:bg-muted/50 text-muted hover:text-primary shrink-0 transition", children: _jsx("div", { className: "flex gap-1.5 items-center", children: filterValues.length > 0 ? (filterValues.length === 1 ? filterValues[0] : `${filterValues.length} tags`) : ("Add tags...") }) }), _jsx(PopoverContent, { className: "w-[300px] p-3", children: _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("div", { className: "flex items-center p-1.5 text-xs text-muted", children: _jsx("span", { children: filterType }) }), _jsx(InputList, { value: tags, onChange: setTags, placeholder: `Add ${filterType.toLowerCase()}...` }), _jsxs("div", { className: "flex gap-2 justify-end", children: [_jsx(Button, { size: "sm", variant: "ghost", onClick: () => {
                                        setTags(filterValues);
                                        setOpen(false);
                                    }, children: "Cancel" }), _jsx(Button, { size: "sm", onClick: handleApply, children: "Apply" })] })] }) })] }));
};
//# sourceMappingURL=StringListCombobox.js.map