import React from 'react';
import { StatusAlertSmall } from '@wix/wix-ui-icons-common';
import Input from '../Input';
import LabelledElement from '../LabelledElement/LabelledElement';
import Text from '../Text';
import InputWithOptions from '../InputWithOptions';
import { st, classes } from './AutoCompleteWithLabel.st.css.js';
import { DATA_HOOKS } from './AutoCompleteWithLabel.constants';
class AutoCompleteWithLabel extends React.PureComponent {
    constructor(props) {
        super(props);
        this.onSelect = (option) => {
            if (!option) {
                return;
            }
            const { value } = option;
            this.setState({ value: value });
            this.props.onSelect(option);
            this.setState({ isEditing: false });
        };
        this.onChange = (event) => {
            const { value } = event.target;
            this.setState({ value, isEditing: true });
            this.props.onChange && this.props.onChange(event);
        };
        this._isInputControlled = () => typeof this.props.value !== 'undefined';
        this.state = {
            value: props.value || '',
            isEditing: false,
        };
    }
    render() {
        const { label, dataHook, options, status, suffix, statusMessage, onFocus, name, type, ariaLabel, autoFocus, autocomplete, disabled, className, maxLength, placeholder, native, onBlur, maxHeightPixels, } = this.props;
        const { value } = this._isInputControlled() ? this.props : this.state;
        const predicate = this.state.isEditing
            ? (option) => typeof option.value === 'string' &&
                option.value.toLowerCase().includes(value.toLowerCase())
            : () => true;
        const filteredOptions = options.filter(predicate);
        const suffixContainer = suffix
            ? suffix.map((item, index) => {
                return (React.createElement("div", { className: classes.suffix, key: `${dataHook}-${index}` }, item));
            })
            : [];
        return (React.createElement("div", { "data-hook": dataHook },
            React.createElement(LabelledElement, { label: label, dataHook: DATA_HOOKS.labelledElement, value: value }, ({ onFocus: inputOnFocus, onBlur: inputOnBlur, onChange: inputOnChange, className: inputClassName, getPlaceholder, ...rest }) => (React.createElement(InputWithOptions, { onChange: e => {
                    inputOnChange(e);
                    this.onChange(e);
                }, onSelect: this.onSelect, dataHook: DATA_HOOKS.inputWithOptions, hideStatusSuffix: true, onFocus: e => {
                    inputOnFocus();
                    onFocus?.(e);
                }, onBlur: e => {
                    inputOnBlur();
                    onBlur?.(e);
                }, size: "large", autocomplete: autocomplete, inputElement: React.createElement(Input, { name: name, type: type, ariaLabel: ariaLabel, autoFocus: autoFocus, disabled: disabled, maxLength: maxLength, placeholder: getPlaceholder(placeholder), dataHook: DATA_HOOKS.inputWithLabel, value: value, className: st(inputClassName, className), suffix: suffixContainer, status: status }), options: filteredOptions, native: native, maxHeightPixels: maxHeightPixels, ...rest }))),
            status === Input.StatusError && statusMessage && (React.createElement(Text, { skin: "error", weight: "normal", size: "small", className: classes.statusMessage },
                React.createElement("span", { className: classes.statusMessageIcon },
                    React.createElement(StatusAlertSmall, null)),
                React.createElement("span", { "data-hook": DATA_HOOKS.errorMessage, className: classes.errorMessageContent }, statusMessage)))));
    }
}
AutoCompleteWithLabel.displayName = 'AutoCompleteWithLabel';
AutoCompleteWithLabel.defaultProps = {
    autocomplete: 'on',
    label: '',
    options: [],
    onSelect: () => { },
};
export default AutoCompleteWithLabel;
//# sourceMappingURL=AutoCompleteWithLabel.js.map