"use client";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useEffect } from "react";
import { TextField } from "../form/TextField.js";
import { useEditableCombobox } from "../form/useEditableCombobox.js";
import { Menu } from "../menu/Menu.js";
import { KeyboardMovementProvider } from "../movement/useKeyboardMovementProvider.js";
import { useEnsuredId } from "../useEnsuredId.js";
import { useEnsuredRef } from "../useEnsuredRef.js";
import { useEnsuredState } from "../useEnsuredState.js";
import { AutocompleteCircularProgress } from "./AutocompleteCircularProgress.js";
import { AutocompleteDropdownButton } from "./AutocompleteDropdownButton.js";
import { FilterAutocompleteOptions } from "./FilterAutocompleteOptions.js";
import { autocomplete, autocompleteRightAddon } from "./autocompleteStyles.js";
const noop = ()=>{
// do nothing
};
export function Autocomplete(props) {
    const { id: propId, value: propValue, defaultValue = "", onClick, onFocus, onKeyDown, onChange = noop, onFocusChange, className, options, children, inputRef, extractor, onAutocomplete = noop, getOptionProps, clearOnAutocomplete, menuProps, menuLabel, menuLabelledBy, containerProps, filter, whitespace, disableFilter, noOptionsChildren, dropdownButtonProps, disableDropdownButton, loading, loadingProps, rightAddon, rightAddonProps, ...remaining } = props;
    const { form } = props;
    const id = useEnsuredId(propId, "autocomplete");
    const menuId = useEnsuredId(menuProps?.id, "autocomplete-listbox");
    const [query, setQuery] = useEnsuredState({
        value: propValue,
        setValue: typeof propValue === "string" ? noop : undefined,
        defaultValue
    });
    const { visible, setVisible, getMenuProps, comboboxRef, comboboxProps, movementContext } = useEditableCombobox({
        form,
        onClick,
        onFocus,
        onKeyDown,
        onFocusChange,
        popupId: menuId,
        popupRef: menuProps?.ref,
        comboboxId: id,
        comboboxRef: inputRef
    });
    const [containerNodeRef, containerRef] = useEnsuredRef(containerProps?.ref);
    useEffect(()=>{
        const input = comboboxRef.current;
        if (!input || document.activeElement !== input) {
            return;
        }
        const target = input.value.length;
        input.setSelectionRange(target, target);
    }, [
        comboboxRef,
        loading
    ]);
    return /*#__PURE__*/ _jsxs(KeyboardMovementProvider, {
        value: movementContext,
        children: [
            /*#__PURE__*/ _jsx(TextField, {
                "aria-autocomplete": "list",
                ...remaining,
                value: query,
                ...comboboxProps,
                containerProps: {
                    ...containerProps,
                    ref: containerRef
                },
                className: autocomplete({
                    className,
                    loading,
                    disableDropdownButton
                }),
                onChange: (event)=>{
                    onChange(event);
                    setQuery(event.currentTarget.value);
                },
                onKeyDown: (event)=>{
                    comboboxProps.onKeyDown(event);
                    if (!visible && event.key === "Escape") {
                        onAutocomplete(null);
                    }
                },
                onFocus: (event)=>{
                    comboboxProps.onFocus(event);
                    event.currentTarget.setSelectionRange(0, event.currentTarget.value.length);
                },
                rightAddon: /*#__PURE__*/ _jsxs(_Fragment, {
                    children: [
                        rightAddon,
                        loading && /*#__PURE__*/ _jsx(AutocompleteCircularProgress, {
                            ...loadingProps
                        }),
                        !disableDropdownButton && /*#__PURE__*/ _jsx(AutocompleteDropdownButton, {
                            "aria-label": menuLabel,
                            "aria-labelledby": menuLabelledBy,
                            "aria-controls": comboboxProps.id,
                            ...dropdownButtonProps,
                            visible: visible,
                            onClick: ()=>{
                                comboboxRef.current?.focus();
                                setVisible((prev)=>!prev);
                            }
                        })
                    ]
                }),
                rightAddonProps: {
                    ...rightAddonProps,
                    pointerEvents: true,
                    className: autocompleteRightAddon({
                        className: rightAddonProps?.className
                    })
                }
            }),
            /*#__PURE__*/ _jsxs(Menu, {
                "aria-label": menuLabel,
                "aria-labelledby": menuLabelledBy,
                ...getMenuProps(menuProps),
                // since the `afterInputChildren` is not included in the `comboboxRef`'s
                // width, the menu will no longer be equal width without changing the
                // fixedTo node to the container
                fixedTo: containerNodeRef,
                children: [
                    children,
                    /*#__PURE__*/ _jsx(FilterAutocompleteOptions, {
                        query: query,
                        filter: filter,
                        options: options,
                        noOptionsChildren: noOptionsChildren,
                        extractor: extractor,
                        whitespace: whitespace,
                        comboboxRef: comboboxRef,
                        disableFilter: disableFilter || props["aria-autocomplete"] === "none",
                        getOptionProps: getOptionProps,
                        onAutocomplete: onAutocomplete,
                        clearOnAutocomplete: clearOnAutocomplete
                    })
                ]
            })
        ]
    });
}

//# sourceMappingURL=Autocomplete.js.map