import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Check } from "lucide-react";
import clsx from "clsx";
import { useMemo, useState } from "react";
import { Input } from "./shadcn";
const Default_Option_Style = "flex-1 px-2 py-2 hover:bg-accent nowrap";
function defaultOptionLayout(option, isSelected) {
    return {
        label: String(option),
        check: isSelected ? _jsx(Check, { className: 'size-4' }) : _jsx("div", { className: "size-4" }),
        reverse: false,
        className: Default_Option_Style,
    };
}
export function SelectList({ value, options, onChange, className, optionLayout, by, noCheck, filterBy }) {
    const [selected, setSelected] = useState(value);
    const [filterValue, setFilterValue] = useState("");
    const onSelect = (option) => {
        setSelected(option);
        onChange(option);
    };
    const optionEquals = useMemo(() => {
        if (typeof by === 'string') {
            return (o1, o2) => o1[by] === o2[by];
        }
        else if (!by) {
            return (o1, o2) => o1 === o2;
        }
        else {
            return by;
        }
    }, [by]);
    return (_jsxs("div", { className: clsx("", className), children: [filterBy && (_jsx(Input, { type: "text", placeholder: "Filter...", value: filterValue, onChange: (value) => setFilterValue(value) })), options.map((option, i) => {
                if (filterBy && !filterBy(filterValue)(option)) {
                    return null;
                }
                const isSelected = selected ? optionEquals(selected, option) : false;
                let layout;
                if (optionLayout) {
                    layout = optionLayout(option, isSelected);
                    layout = Object.assign(defaultOptionLayout(option, isSelected), layout);
                }
                else {
                    layout = defaultOptionLayout(option, isSelected);
                }
                return (_jsx(SelectListOption, { option: option, onSelect: onSelect, layout: layout, noCheck: noCheck }, i));
            })] }));
}
function SelectListOption({ option, onSelect, layout, noCheck }) {
    return (_jsxs("div", { className: clsx('group flex items-center cursor-pointer gap-x-2 hover:bg-muted', layout.reverse && 'flex-row-reverse', layout.className), onClick: () => onSelect(option), children: [noCheck ? null : _jsx("div", { className: "", children: layout.check }), _jsx("div", { className: 'flex-1', children: layout.label })] }));
}
//# sourceMappingURL=SelectList.js.map