"use client";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Listbox } from "../form/Listbox.js";
import { TextField } from "../form/TextField.js";
import { ListSubheader } from "../list/ListSubheader.js";
import { KeyboardMovementProvider } from "../movement/useKeyboardMovementProvider.js";
import { useEnsuredId } from "../useEnsuredId.js";
import { useEnsuredRef } from "../useEnsuredRef.js";
import { AutocompleteChip } from "./AutocompleteChip.js";
import { AutocompleteCircularProgress } from "./AutocompleteCircularProgress.js";
import { AutocompleteClearButton } from "./AutocompleteClearButton.js";
import { AutocompleteDropdownButton } from "./AutocompleteDropdownButton.js";
import { AutocompleteListboxChildren } from "./AutocompleteListboxChildren.js";
import { autocomplete, autocompleteRightAddon } from "./autocompleteStyles.js";
import { defaultAutocompleteFilter, noopAutocompleteFilter } from "./defaults.js";
import { useAutocomplete } from "./useAutocomplete.js";
const noop = ()=>undefined;
/**
 * @see {@link https://react-md.dev/components/autocomplete | Autocomplete Demos}
 * @since 6.0.0
 * @internal
 */ export function Autocomplete(props) {
    const { id: propId, onBlur, onFocus, onClick, onChange, onKeyDown, onOpen, type, className, inputRef, children, filter = type === "search" ? noopAutocompleteFilter : defaultAutocompleteFilter, filterSelected, value, setValue, defaultValue, onValueChange, query, setQuery, defaultQuery, options, getOptionLabel: propGetOptionLabel, getOptionProps: propGetOptionProps, allowAnyValue, listboxProps, listboxLabel, listboxLabelledBy, selectedIcon, unselectedIcon, selectedIconAfter, checkboxes, disableSelectedIcon, loading, loadingProps, dropdownButtonProps, disableDropdownButton, clearButtonProps, disableClearButton, clearButtonVisibility = "query", noOptionsChildren = /*#__PURE__*/ _jsx(ListSubheader, {
        children: "No Options"
    }), leftAddon: propLeftAddon, disableLeftAddonStyles: propDisableLeftAddonStyles, labelProps, rightAddon, rightAddonProps, containerProps, getChipProps = noop, updateQueryOnSelect, visible, setVisible, defaultVisible, disableInlineChips, disableCloseOnSelect, ...remaining } = props;
    const { form, disabled } = props;
    const id = useEnsuredId(propId, "autocomplete");
    const menuId = useEnsuredId(listboxProps?.id, "autocomplete-listbox");
    const { query: currentQuery, value: currentValue, setValue: currentSetValue, multiselect, comboboxRef: inputNodeRef, comboboxProps, movementContext, availableOptions, getOptionLabel, getOptionProps, getListboxProps, getClearButtonProps, getDropdownButtonProps } = useAutocomplete({
        form,
        onBlur,
        onFocus,
        onClick,
        onChange,
        onKeyDown,
        onOpen,
        disabled,
        filter,
        filterSelected,
        popupId: menuId,
        popupRef: listboxProps?.ref,
        comboboxId: id,
        comboboxRef: inputRef,
        options,
        getOptionLabel: propGetOptionLabel,
        getOptionProps: propGetOptionProps,
        allowAnyValue,
        updateQueryOnSelect,
        value,
        setValue,
        defaultValue,
        onValueChange,
        query,
        setQuery,
        defaultQuery,
        defaultVisible,
        visible,
        setVisible,
        checkboxes,
        selectedIcon,
        unselectedIcon,
        selectedIconAfter,
        disableSelectedIcon,
        disableCloseOnSelect
    });
    const [containerRef, containerRefCallback] = useEnsuredRef(containerProps?.ref);
    let leftAddon = propLeftAddon;
    let disableLeftAddonStyles = propDisableLeftAddonStyles;
    let inlineChips = false;
    let floatingActive = labelProps?.floatingActive;
    if (multiselect && !disableInlineChips) {
        inlineChips = true;
        // TODO: Maybe one day fix the typing? Might not be possible with
        // destructuring though
        const value = currentValue;
        disableLeftAddonStyles ??= true;
        floatingActive ||= value.length > 0;
        leftAddon = /*#__PURE__*/ _jsx(_Fragment, {
            children: value.map((option, index)=>{
                const label = getOptionLabel(option);
                const overrides = getChipProps({
                    index,
                    query: currentQuery,
                    option,
                    extractor: getOptionLabel
                });
                return /*#__PURE__*/ _jsx(AutocompleteChip, {
                    ...overrides,
                    onClick: (event)=>{
                        overrides?.onClick?.(event);
                        currentSetValue(value.filter((v)=>v !== option));
                    },
                    children: overrides?.children ?? label
                }, label);
            })
        });
    }
    return /*#__PURE__*/ _jsxs(KeyboardMovementProvider, {
        value: movementContext,
        children: [
            /*#__PURE__*/ _jsx(TextField, {
                ...remaining,
                ...comboboxProps,
                containerProps: {
                    ...containerProps,
                    ref: containerRefCallback,
                    onClick: (event)=>{
                        containerProps?.onClick?.(event);
                        inputNodeRef.current?.focus();
                    }
                },
                className: autocomplete({
                    className,
                    loading,
                    inlineChips,
                    disableClearButton,
                    disableDropdownButton
                }),
                labelProps: {
                    ...labelProps,
                    floatingActive
                },
                leftAddon: leftAddon,
                disableLeftAddonStyles: disableLeftAddonStyles,
                rightAddon: /*#__PURE__*/ _jsxs(_Fragment, {
                    children: [
                        rightAddon,
                        loading && /*#__PURE__*/ _jsx(AutocompleteCircularProgress, {
                            ...loadingProps
                        }),
                        !disableClearButton && /*#__PURE__*/ _jsx(AutocompleteClearButton, {
                            ...clearButtonProps,
                            visibility: clearButtonVisibility,
                            ...getClearButtonProps(clearButtonProps)
                        }),
                        !disableDropdownButton && /*#__PURE__*/ _jsx(AutocompleteDropdownButton, {
                            "aria-label": listboxLabel,
                            "aria-labelledby": listboxLabelledBy,
                            ...getDropdownButtonProps(dropdownButtonProps)
                        })
                    ]
                }),
                rightAddonProps: {
                    ...rightAddonProps,
                    pointerEvents: true,
                    className: autocompleteRightAddon({
                        className: rightAddonProps?.className
                    })
                }
            }),
            /*#__PURE__*/ _jsx(Listbox, {
                "aria-label": listboxLabel,
                "aria-labelledby": listboxLabelledBy,
                ...getListboxProps(listboxProps),
                fixedTo: containerRef,
                children: /*#__PURE__*/ _jsx(AutocompleteListboxChildren, {
                    query: currentQuery,
                    options: availableOptions,
                    getOptionLabel: getOptionLabel,
                    getOptionProps: getOptionProps,
                    noOptionsChildren: noOptionsChildren,
                    children: children
                })
            })
        ]
    });
}

//# sourceMappingURL=Autocomplete.js.map