import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState } from "react";
import { CommandItem, CommandEmpty } from "../../command";
import { Button } from "../../button";
import { DynamicLabel } from "../DynamicLabel";
export default function SelectFilter({ selectedView, commandInput, setFilters, handleClose, filterGroups, }) {
    const [selectedOptions, setSelectedOptions] = useState([]);
    const getFilteredOptions = (groupName) => {
        const group = filterGroups.find(g => g.name === groupName);
        if (!group) {
            return [];
        }
        let filteredOptions = group.options || [];
        if (!commandInput.trim()) {
            return filteredOptions;
        }
        if (group.filterBy) {
            const filterLc = commandInput.toLowerCase();
            const results = filteredOptions.filter(option => {
                if (option.value === undefined)
                    return false;
                return group.filterBy(option.value, filterLc);
            });
            return results;
        }
        const filterLc = commandInput.toLowerCase();
        return filteredOptions.filter(option => {
            const optionValue = String(option.value || '').toLowerCase();
            return optionValue.includes(filterLc);
        });
    };
    if (!selectedView) {
        return null;
    }
    const options = getFilteredOptions(selectedView);
    const selectedGroup = filterGroups.find(g => g.name === selectedView);
    if (options.length === 0) {
        return _jsx(CommandEmpty, { children: "No matching options" });
    }
    const groupTitle = selectedGroup?.placeholder || selectedGroup?.name;
    const handleApply = () => {
        if (selectedOptions.length > 0) {
            setFilters(prev => [
                ...prev.filter(f => f.name !== selectedView),
                {
                    name: selectedView || "",
                    placeholder: selectedGroup?.placeholder || "",
                    value: selectedOptions,
                    type: selectedGroup?.type || "select",
                    multiple: selectedGroup?.multiple || false,
                }
            ]);
        }
        handleClose();
    };
    const handleOptionToggle = (option) => {
        const filterOption = {
            value: option.value,
            label: option.label
        };
        if (selectedGroup?.multiple) {
            // For multiple selection, toggle the option
            const isSelected = selectedOptions.some(opt => opt.value === option.value);
            if (isSelected) {
                setSelectedOptions(prev => prev.filter(opt => opt.value !== option.value));
            }
            else {
                setSelectedOptions(prev => [...prev, filterOption]);
            }
        }
        else {
            // For single selection, apply immediately
            setFilters((prev) => {
                const existingFilterIndex = prev.findIndex(f => f.name === selectedView);
                if (existingFilterIndex >= 0) {
                    const updatedFilters = [...prev];
                    updatedFilters[existingFilterIndex] = {
                        ...updatedFilters[existingFilterIndex],
                        value: [filterOption]
                    };
                    return updatedFilters;
                }
                else {
                    return [...prev, {
                            name: selectedView || "",
                            placeholder: selectedGroup?.placeholder || "",
                            value: [filterOption],
                            type: selectedGroup?.type || "select",
                            multiple: selectedGroup?.multiple || false,
                        }];
                }
            });
            handleClose();
        }
    };
    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex items-center p-1.5 text-xs text-muted", children: _jsx("span", { children: groupTitle }) }), _jsx("div", { className: "max-h-50 overflow-y-auto", children: options.map((option) => {
                    const isSelected = selectedOptions.some(opt => opt.value === option.value);
                    return (_jsxs(CommandItem, { className: `group flex gap-2 items-center w-full hover:bg-muted ${selectedGroup?.multiple && isSelected ? 'bg-muted' : ''}`, onSelect: () => handleOptionToggle(option), children: [_jsx(DynamicLabel, { value: option.value || '', labelRenderer: option.labelRenderer || selectedGroup?.labelRenderer, fallbackLabel: option.label }), selectedGroup?.multiple && isSelected && (_jsx("span", { className: "ml-auto text-xs text-success", children: "\u2713" }))] }, option.value || `option-${Math.random()}`));
                }) }), selectedGroup?.multiple && (_jsx("div", { className: "p-2 border-t", children: _jsxs("div", { className: "flex gap-2 justify-end", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: handleClose, children: "Cancel" }), _jsx(Button, { size: "sm", onClick: handleApply, disabled: selectedOptions.length === 0, children: "Apply" })] }) }))] }));
}
//# sourceMappingURL=SelectFilter.js.map