"use strict";
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Select = Select;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const box_1 = require("../box");
const input_1 = require("../input");
const consts_1 = require("../input/consts");
const helpText_1 = __importDefault(require("../input/helpText"));
const popover_1 = require("../popover");
const utils_1 = require("../utils");
const context_1 = require("./context");
const selectButton_1 = __importDefault(require("./selectButton"));
const selectContent_1 = __importDefault(require("./selectContent"));
const selectGroup_1 = __importDefault(require("./selectGroup"));
const selectLabel_1 = __importDefault(require("./selectLabel"));
const selectOption_1 = __importDefault(require("./selectOption"));
const useSelect_1 = __importDefault(require("./useSelect"));
/**
 * Wraps trigger and content elements, providing them with context.
 * When no children are provided, content can be displayed based on 'options' data prop.
 * Supports single select and multi select, as well as controlled and uncontrolled modes.
 */
function Select(props) {
    var _a;
    const { children, defaultValue, disabled, errorText, closeOnScroll, helpText, id: idProp, isInvalid, isMultiple, label, labelMarkOptional, labelTooltipText, maxHeight, name, onChange, options, matchWidth = true, placeholder = 'Please select', selectedText, readOnly, selectButton, selectButtonProps, showOptionsFilter, size = 'lg', value, variant } = props, rest = __rest(props, ["children", "defaultValue", "disabled", "errorText", "closeOnScroll", "helpText", "id", "isInvalid", "isMultiple", "label", "labelMarkOptional", "labelTooltipText", "maxHeight", "name", "onChange", "options", "matchWidth", "placeholder", "selectedText", "readOnly", "selectButton", "selectButtonProps", "showOptionsFilter", "size", "value", "variant"]);
    const selectProps = (0, useSelect_1.default)({ defaultValue, isMultiple, onChange, value, options, selectedText, children });
    if (utils_1.__DEV__ && isMultiple && !Array.isArray(selectProps.value))
        console.error('<Select /> is used with isMultiple but its value is not an array: ', value);
    const generatedId = (0, react_1.useId)();
    const [query, setQuery] = (0, react_1.useState)('');
    const [filteredOptions, setFilteredOptions] = (0, react_1.useState)(options);
    const id = idProp || generatedId;
    const context = Object.assign({ disabled,
        isInvalid,
        isMultiple,
        name,
        options,
        placeholder,
        selectedText,
        readOnly,
        size,
        variant }, selectProps);
    const onQueryChange = (e) => { var _a; return setQuery((_a = e.target.value) === null || _a === void 0 ? void 0 : _a.toLowerCase()); };
    const filterOptions = (i) => { var _a, _b; return !showOptionsFilter || !(query === null || query === void 0 ? void 0 : query.length) ? true : (_b = (_a = i === null || i === void 0 ? void 0 : i.text) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.includes(query); };
    (0, react_1.useEffect)(() => {
        setFilteredOptions(options === null || options === void 0 ? void 0 : options.filter(filterOptions));
    }, [query, options]);
    return ((0, jsx_runtime_1.jsx)(context_1.SelectProvider, { value: context, children: (0, jsx_runtime_1.jsxs)(box_1.Box, Object.assign({ className: "vui-selectContainer", column: true }, rest, { children: [!!label && ((0, jsx_runtime_1.jsx)(selectLabel_1.default, { disabled: disabled, id: id, label: label, labelMarkOptional: labelMarkOptional, labelTooltipText: labelTooltipText })), (0, jsx_runtime_1.jsx)(popover_1.Popover, { matchWidth: matchWidth, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [selectButton !== null && selectButton !== void 0 ? selectButton : (0, jsx_runtime_1.jsx)(selectButton_1.default, Object.assign({}, selectButtonProps)), (0, jsx_runtime_1.jsxs)(selectContent_1.default, { overflow: "hidden", children: [showOptionsFilter && ((0, jsx_runtime_1.jsx)(box_1.Box, { children: (0, jsx_runtime_1.jsx)(input_1.Input, { iconLeft: "falSearch", id: id, m: 1, mt: 0, onChange: onQueryChange, placeholder: "Filter\u2026", size: size, value: query, w: "100%" }) })), (0, jsx_runtime_1.jsx)(selectGroup_1.default, { maxH: maxHeight, overflowY: "auto", tabIndex: 1000, children: children !== null && children !== void 0 ? children : (_a = filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.map) === null || _a === void 0 ? void 0 : _a.call(filteredOptions, option => ((0, jsx_runtime_1.jsx)(selectOption_1.default, Object.assign({ closeOnScroll: closeOnScroll, title: option.text }, option), option.value))) })] })] }) }), !!helpText && (0, jsx_runtime_1.jsx)(helpText_1.default, { size: consts_1.helpTextSize[size], children: helpText }), !!errorText && ((0, jsx_runtime_1.jsx)(helpText_1.default, { isError: true, size: consts_1.helpTextSize[size], children: errorText }))] })) }));
}
Select.Button = selectButton_1.default;
Select.Content = selectContent_1.default;
Select.Group = selectGroup_1.default;
Select.Option = selectOption_1.default;
Select.displayName = 'Select';
exports.default = Select;
//# sourceMappingURL=select.js.map