import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react";
import Collapsable from "../Collapsable";
import Text from "../Text";
import Styles from "./Select.module.scss";
import Input from "../Input";
import Loader from "../Loader";
import { useOneUIConfig, useOneUIContext, } from "../../context/OneUIProvider";
import { AnchoredTooltipAlignment, AnchoredTooltipAnchor, } from "../AnchoredTooltip/AnchoredTooltip";
/**
 * A dropdown select
 **/
function Select({ items, label, loading, rootClassName = "", dropdownClassName: _drop = "", alignTo = AnchoredTooltipAlignment.CENTER, filter, ...otherProps }) {
    const { selected: _, onClick: __, ...propsToSpread } = otherProps;
    const { StateIndicator } = useOneUIContext().component.select;
    const collapsableRef = useRef(null);
    const _selected = useMemo(() => {
        if (otherProps.mode === "multi")
            return items.filter((a) => otherProps.selected?.includes(a.value));
        return items.find((a) => a.value === otherProps.selected);
    }, [otherProps.selected, items]);
    const [open, setOpen] = useState(false);
    const [filterTerm, setFilterTerm] = useState("");
    const filteredItems = useMemo(() => {
        if (filter && filterTerm)
            return items.filter((item) => filter(item, filterTerm));
        else
            return items;
    }, [filterTerm, items]);
    useEffect(() => {
        collapsableRef.current.redimension();
    }, [filteredItems.length]);
    useLayoutEffect(() => {
        if (open)
            setFilterTerm("");
    }, [open]);
    const selectClasses = _drop
        ? {
            dropdown: _drop,
        }
        : useOneUIConfig("component.select.className", {});
    useEffect(() => {
        if (open) {
            const close = () => {
                setOpen(false);
            };
            window.addEventListener("click", close);
            return () => window.removeEventListener("click", close);
        }
    }, [open]);
    return (_jsx(Collapsable, { title: _jsx(Input, { ...propsToSpread, className: `${Styles.input} ${selectClasses.input} ${!items.length ? Styles.empty : ""} ${otherProps.disabled ? Styles.disabled : ""}`, value: Array.isArray(_selected)
                ? _selected.length
                    ? `(${_selected.length}) ${"labelStr" in _selected[0]
                        ? _selected[0].labelStr
                        : _selected[0].label}`
                    : label || ""
                : _selected
                    ? "labelStr" in _selected
                        ? _selected.labelStr
                        : _selected.label
                    : label || "", disabled: true, Icon: _jsx("div", { className: `${Styles.indicator}`, children: loading ? _jsx(Loader, {}) : _jsx(StateIndicator, { open: !!open }) }) }), id: undefined, mode: "float", open: open, onToggleOpen: (open) => {
            if (items.length && !otherProps.disabled)
                setOpen(open);
        }, className: `${otherProps.disabled ? "disabled" : ""} ${rootClassName}`, contentClassName: `${Styles.optionsContainer} ${selectClasses.dropdown}`, alignTo: alignTo, ref: collapsableRef, anchorTo: AnchoredTooltipAnchor.BOTTOM, children: _jsxs("div", { className: Styles.items, onClick: (e) => {
                e.stopPropagation();
                setOpen(false);
            }, children: [filter && (_jsx("div", { className: Styles.searchInput, children: _jsx(Input, { onChange: ({ target: { value } }) => setFilterTerm(value), decoration: _jsx("span", { children: "\uD83D\uDD0E\u00A0" }), containerProps: {
                            onClick: (e) => e.stopPropagation(),
                        }, value: filterTerm }) })), filteredItems.map((i) => (_jsx(Text, { type: "caption", className: `${i === _selected
                        ? `${Styles.selected} ${selectClasses.selectedItem}`
                        : ""} ${selectClasses.item || ""}`, onClick: () => {
                        if (otherProps.mode === "multi") {
                            const curr = otherProps.selected || [];
                            otherProps.onClick([
                                ...curr.map((iId) => items.find((i) => i.value === iId)),
                                i,
                            ]);
                        }
                        else
                            otherProps.onClick(i);
                    }, ...i, children: i.label }, i.value)))] }) }));
}
/**
 * A dropdown select component that lets users choose one or more options from a list.
 * It can show a loading state and supports filtering through search.
 */
export default Select;
//# sourceMappingURL=Select.js.map