import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { Browser } from '../../../services/browser';
import { ENTER } from '../../../services/key_codes';
import { SoftFormControlLayout, } from '../form_control_layout';
import { SoftValidatableControl, } from '../validatable_control';
const propTypes = {
    name: PropTypes.string,
    id: PropTypes.string,
    placeholder: PropTypes.string,
    value: PropTypes.string,
    isInvalid: PropTypes.bool,
    fullWidth: PropTypes.bool,
    isLoading: PropTypes.bool,
    inputRef: PropTypes.func,
    /**
     * Called when the user presses [Enter] OR on change if the incremental prop is `true`.
     * If you don't need the on[Enter] functionality, prefer using onChange
     */
    onSearch: PropTypes.func,
    /**
     * When `true` the search will be executed (that is, the `onSearch` will be called) as the
     * user types.
     */
    incremental: PropTypes.bool,
    /**
     * when `true` creates a shorter height input
     */
    compressed: PropTypes.bool,
};
const defaultProps = {
    fullWidth: false,
    isLoading: false,
    incremental: false,
    compressed: false,
};
export class SoftFieldSearch extends Component {
    constructor(props) {
        super(props);
        this.setRef = inputElement => {
            this.inputElement = inputElement;
            if (this.props.inputRef) {
                this.props.inputRef(inputElement);
            }
        };
        this.onKeyUp = (incremental, onSearch, event) => {
            if (this.props.onKeyUp) {
                this.props.onKeyUp(event);
                if (event.defaultPrevented) {
                    return;
                }
            }
            if (onSearch && (incremental || event.keyCode === ENTER)) {
                onSearch(event.target.value);
            }
        };
        this.cleanups = [];
    }
    componentDidMount() {
        if (Browser.isEventSupported('search', this.inputElement)) {
            const onSearch = (event) => {
                if (this.props.onSearch) {
                    this.props.onSearch(event.target.value);
                }
            };
            this.inputElement.addEventListener('search', onSearch);
            this.cleanups.push(() => this.inputElement.removeEventListener('search', onSearch));
        }
    }
    componentWillUnmount() {
        this.cleanups.forEach(cleanup => cleanup());
    }
    render() {
        const { className, id, name, placeholder, value, isInvalid, fullWidth, isLoading, inputRef, // eslint-disable-line no-unused-vars
        incremental, compressed, onSearch, ...rest } = this.props;
        const classes = classNames('softFieldSearch', {
            'softFieldSearch--fullWidth': fullWidth,
            'softFieldSearch--compressed': compressed,
            'softFieldSearch-isLoading': isLoading,
        }, className);
        return (React.createElement(SoftFormControlLayout, { icon: "search", fullWidth: fullWidth, isLoading: isLoading, compressed: compressed },
            React.createElement(SoftValidatableControl, { isInvalid: isInvalid },
                React.createElement("input", Object.assign({ type: "search", id: id, name: name, placeholder: placeholder, className: classes, value: value, onKeyUp: this.onKeyUp.bind(this, incremental, onSearch), ref: this.setRef }, rest)))));
    }
}
SoftFieldSearch.propTypes = propTypes;
SoftFieldSearch.defaultProps = defaultProps;
//# sourceMappingURL=SoftFieldSearch.js.map