"use strict";
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
            t[p[i]] = s[p[i]];
    return t;
};
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
    result["default"] = mod;
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
/* @flow */
const React = __importStar(require("react"));
const classnames_1 = __importDefault(require("classnames"));
const idx_1 = __importDefault(require("idx"));
{
    SearchInputProps;
}
from;
'./types';
const downshift_1 = __importDefault(require("downshift"));
const prop_types_1 = __importDefault(require("prop-types"));
const withStyles_1 = __importDefault(require("components/hoc/withStyles"));
const ErrorBoundary_1 = __importDefault(require("components/hoc/ErrorBoundary"));
const TextField_1 = __importDefault(require("components/bosons/TextField"));
const styles_1 = __importDefault(require("./styles"));
class SearchInput extends React.Component {
    constructor() {
        super(...arguments);
        this._handleStateReducer = (state, changes) => {
            switch (changes.type) {
                // Downshift by default reset the input value on blur when there is no item selected
                // we dont want to reset that value
                case downshift_1.default.stateChangeTypes.mouseUp:
                case downshift_1.default.stateChangeTypes.blurInput: {
                    return Object.assign({}, changes, { inputValue: state.inputValue });
                }
                default:
                    return changes;
            }
        };
        this._renderItem = ({ getItemProps, item, index, selectedItem }) => {
            const { classes, renderItem, labelKey } = this.props;
            return (React.createElement("div", Object.assign({}, getItemProps({ item: item }), { key: `${item[labelKey]}-${index}`, className: classnames_1.default(classes.searchItem, {
                    isSelected: selectedItem === item,
                }) }), renderItem ? renderItem(item) : item[labelKey]));
        };
    }
    render() {
        const _a = this.props, { classes, onSearch, onItemClick, searchLoading, items = [], showSearchIcon, defaultInputValue, renderItem, // eslint-disable-line
        labelKey, showClearIcon, onInputChange } = _a, rest = __rest(_a, ["classes", "onSearch", "onItemClick", "searchLoading", "items", "showSearchIcon", "defaultInputValue", "renderItem", "labelKey", "showClearIcon", "onInputChange"]);
        return (React.createElement(ErrorBoundary_1.default, null,
            React.createElement("div", { className: classes.root },
                React.createElement(downshift_1.default, { itemToString: i => (i ? i[labelKey] : i), onChange: onItemClick, initialInputValue: defaultInputValue, stateReducer: this._handleStateReducer }, ({ getInputProps, getItemProps, isOpen, inputValue, selectedItem, clearSelection, }) => {
                    return (React.createElement("div", { style: { position: 'relative' } },
                        React.createElement("div", { className: classnames_1.default(classes.component, isOpen && items.length > 0 ? 'is-open' : '') },
                            React.createElement(TextField_1.default, Object.assign({}, getInputProps(Object.assign({}, rest, { value: inputValue || '', showClearIcon: showClearIcon || false, label: '', classes: {
                                    textInputWrapper: classes.input,
                                }, onChange: event => {
                                    const value = idx_1.default(event, _ => _.target.value);
                                    if (typeof value === 'undefined') {
                                        return;
                                    }
                                    if (value === '' || !value) {
                                        clearSelection();
                                    }
                                    onInputChange(value);
                                } })))),
                            showSearchIcon && (React.createElement("div", { className: classnames_1.default(classes.icon, {
                                    isLoading: searchLoading,
                                }), onClick: () => onSearch(inputValue) },
                                React.createElement("i", { className: classnames_1.default({
                                        'ion-search': !searchLoading,
                                        'ion-load-c fa-spin': searchLoading,
                                    }) })))),
                        isOpen &&
                            (items || []).length > 0 && (React.createElement("div", { className: classes.searchedItemsWrapper }, items.map((item, index) => this._renderItem({
                            item,
                            index,
                            getItemProps,
                            selectedItem,
                        }))))));
                }))));
    }
}
SearchInput.propTypes = Object.assign({}, TextField_1.default.propTypes, { items: prop_types_1.default.arrayOf(prop_types_1.default.any), onSearch: prop_types_1.default.func, onInputChange: prop_types_1.default.func, onItemClick: prop_types_1.default.func, searchLoading: prop_types_1.default.bool, showSearchIcon: prop_types_1.default.bool, defaultInputValue: prop_types_1.default.string, renderItem: prop_types_1.default.func, labelKey: prop_types_1.default.string });
SearchInput.defaultProps = {
    items: [],
    showSearchIcon: true,
    onSearch: () => { },
    onInputChange: () => { },
    onItemClick: () => { },
    defaultInputValue: '',
    labelKey: 'label',
};
exports.default = withStyles_1.default(styles_1.default)(SearchInput);
//# sourceMappingURL=index.js.map