import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useEffect, useId, useState } from 'react';
import { Box } from '../box';
import { Input } from '../input';
import { helpTextSize } from '../input/consts';
import HelpText from '../input/helpText';
import { Popover } from '../popover';
import { __DEV__ } from '../utils';
import { SelectProvider } from './context';
import SelectButton from './selectButton';
import SelectContent from './selectContent';
import SelectGroup from './selectGroup';
import SelectLabel from './selectLabel';
import SelectOption from './selectOption';
import useSelect from './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.
 */
export function Select(props) {
    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, ...rest } = props;
    const selectProps = useSelect({ defaultValue, isMultiple, onChange, value, options, selectedText, children });
    if (__DEV__ && isMultiple && !Array.isArray(selectProps.value))
        console.error('<Select /> is used with isMultiple but its value is not an array: ', value);
    const generatedId = useId();
    const [query, setQuery] = useState('');
    const [filteredOptions, setFilteredOptions] = useState(options);
    const id = idProp || generatedId;
    const context = {
        disabled,
        isInvalid,
        isMultiple,
        name,
        options,
        placeholder,
        selectedText,
        readOnly,
        size,
        variant,
        ...selectProps,
    };
    const onQueryChange = (e) => setQuery(e.target.value?.toLowerCase());
    const filterOptions = (i) => !showOptionsFilter || !query?.length ? true : i?.text?.toLowerCase()?.includes(query);
    useEffect(() => {
        setFilteredOptions(options?.filter(filterOptions));
    }, [query, options]);
    return (_jsx(SelectProvider, { value: context, children: _jsxs(Box, { className: "vui-selectContainer", column: true, ...rest, children: [!!label && (_jsx(SelectLabel, { disabled: disabled, id: id, label: label, labelMarkOptional: labelMarkOptional, labelTooltipText: labelTooltipText })), _jsx(Popover, { matchWidth: matchWidth, children: _jsxs(_Fragment, { children: [selectButton ?? _jsx(SelectButton, { ...selectButtonProps }), _jsxs(SelectContent, { overflow: "hidden", children: [showOptionsFilter && (_jsx(Box, { children: _jsx(Input, { iconLeft: "falSearch", id: id, m: 1, mt: 0, onChange: onQueryChange, placeholder: "Filter\u2026", size: size, value: query, w: "100%" }) })), _jsx(SelectGroup, { maxH: maxHeight, overflowY: "auto", tabIndex: 1000, children: children ??
                                            filteredOptions?.map?.(option => (_jsx(SelectOption, { closeOnScroll: closeOnScroll, title: option.text, ...option }, option.value))) })] })] }) }), !!helpText && _jsx(HelpText, { size: helpTextSize[size], children: helpText }), !!errorText && (_jsx(HelpText, { isError: true, size: helpTextSize[size], children: errorText }))] }) }));
}
Select.Button = SelectButton;
Select.Content = SelectContent;
Select.Group = SelectGroup;
Select.Option = SelectOption;
Select.displayName = 'Select';
export default Select;
//# sourceMappingURL=select.js.map