import { AutoComplete, Input, } from '@wix/design-system';
import React, { useEffect, useMemo, useRef, useState } from 'react';
import { observer } from 'mobx-react-lite';
import { AutoCompleteReadonlyState } from './AutoCompleteReadonlyState';
import { classes, st } from './AutoCompleteReadonly.st.css.js';
function _AutoCompleteReadonly(props) {
    const { value, selectedLabel, dropdownWidth, clearInput } = props;
    const autoCompleteRef = useRef(null);
    const [state] = useState(() => props.state ?? new AutoCompleteReadonlyState());
    useEffect(() => {
        state.clearInput = clearInput;
        state.autoCompleteRef = autoCompleteRef;
    }, [clearInput, state]);
    const { disableEditing } = state;
    const valueOrSelected = useMemo(() => {
        return disableEditing ? selectedLabel || '' : value;
    }, [value, disableEditing, selectedLabel]);
    return (React.createElement(AutoComplete, { ref: autoCompleteRef, ...props, dropdownWidth: dropdownWidth, onSelect: (option, sameOptionWasPicked) => {
            props.onSelect?.(option, sameOptionWasPicked);
            state.onSelect();
        }, onFocus: (e) => {
            state.onFocus();
            props.onFocus?.(e);
        }, onBlur: (e) => {
            props.onBlur?.(e);
            state.onBlur();
        }, onClickOutside: (e) => {
            props.onClickOutside?.(e);
            state.onClickOutside();
        }, suffix: !disableEditing && String(value)?.trim() ? undefined : props.suffix, placeholder: !disableEditing && selectedLabel != null
            ? String(selectedLabel)
            : props.placeholder, onKeyDown: (e) => {
            if (e.nativeEvent.code === 'Tab') {
                state.onTabKeyDown();
            }
        }, clearButton: !disableEditing, onClear: !disableEditing
            ? (e) => {
                props.onClear?.(e);
                state.onInputClearButtonClick();
            }
            : undefined, value: valueOrSelected, onOptionsShow: state.onOptionsShow, focusOnClearClick: true, className: st(classes.root, {
            disableEditing,
        }), inputElement: React.createElement(Input, { disableEditing: disableEditing }) }));
}
export const AutoCompleteReadonly = observer(_AutoCompleteReadonly);
//# sourceMappingURL=AutoCompleteReadonly.js.map