import { Children, isValidElement, useState } from 'react';
import { toggleItem, useCallbackRef } from '../utils';
export const getOptionText = (value, options) => {
    const option = options?.find((o) => o?.value === value);
    return option?.text || value;
};
/** Handles controlled/uncontrolled value state. Supports single and multiple values. */
export default function useSelect(props) {
    const { defaultValue, isMultiple, onChange: onChangeProp, value: valueProp, options = [], selectedText, children, } = props;
    // Not using useControlled here, because we need custom value setter when uncontrolled
    const [stateValue, setStateValue] = useState(defaultValue);
    const isControlled = valueProp !== undefined;
    const value = isControlled ? valueProp : stateValue;
    // Iterating over the children to dynamically obtain the list of available options
    const dynamicOptions = [];
    Children.forEach(children, element => {
        if (!isValidElement(element))
            return;
        const option = element.props;
        if (option.text && option.value)
            dynamicOptions.push(option);
    });
    /** Sends a change event to the external consumer, but internall keeps the actual value as primitive or array. */
    const onChange = useCallbackRef((e) => {
        onChangeProp?.(e);
        if (!isControlled)
            setStateValue(value => (Array.isArray(value) ? toggleItem(value, e.target.value).sort() : e.target.value));
    });
    const valueText = isMultiple && Array.isArray(value)
        ? value[0]
            ? selectedText && value.length > 1
                ? selectedText
                : `${getOptionText(value[0], [...options, ...dynamicOptions])}${value.length > 1 ? ` (+${value.length - 1})` : ''}`
            : undefined
        : getOptionText(value, [...options, ...dynamicOptions]);
    return { onChange, value, valueText };
}
//# sourceMappingURL=useSelect.js.map