import * as tslib_1 from "tslib";
import * as React from 'react';
import { isFunction } from 'exotic';
import { observe } from 'xmobx/mobx';
import { observer } from 'xmobx/mobx-react';
import { application } from '@skava/state';
import { ClickBoundary } from '@skava/packages/ui';
import { SearchInput } from './SearchInput';
import { searchContainer } from './state';
import SearchSuggestionDropdown from './SearchSuggestionDropdown';
import { SearchBarWrap } from './styled';
import { animateSearchIcon } from './_fixture';
let SearchBar = class SearchBar extends React.Component {
    constructor() {
        super(...arguments);
        this.handleResize = (event) => {
            searchContainer.hide();
        };
    }
    componentDidMount() {
        this.disposer = observe(application, 'screen', this.handleResize);
    }
    componentWillUnmount() {
        if (isFunction(this.disposer) === true) {
            this.disposer();
        }
    }
    render() {
        // console.debug('INSIDE_SEARCHBAr', this)
        const { isVisible, handleKeyboard, isHidden, suggestionList, recentList, placeholder, schemaElement, } = searchContainer;
        const suggestionProps = {
            key: 'main-search-suggestions',
            isVisible,
            suggestionList,
            recentList,
            container: searchContainer,
        };
        const dropDownView = React.createElement(SearchSuggestionDropdown, Object.assign({}, suggestionProps, searchContainer));
        const attributesForSearchInput = {
            key: 'main-search-input',
            inputId: 'main-search-input',
            ref: searchContainer.setInputReference,
            onChange: handleKeyboard,
            onSubmit: searchContainer.handleSubmit,
            onFocusChange: searchContainer.handleSearchBarFocus,
            onCancel: searchContainer.handleOnCancel,
            onClearInputBox: searchContainer.handleSearchBarClear,
            shouldAnimateSearchIcon: animateSearchIcon,
            placeholder,
            isHidden,
            isVisible,
        };
        return (React.createElement(ClickBoundary, { onClickOutside: searchContainer.handleClickBoundary, key: "search-widget-click-boundary" },
            React.createElement(SearchBarWrap, { key: "main-search-input-bar-wrap" },
                schemaElement,
                React.createElement(SearchInput, Object.assign({ "aria-label": 'Search' }, attributesForSearchInput)),
                dropDownView)));
    }
};
SearchBar = tslib_1.__decorate([
    observer
], SearchBar);
export { SearchBar };
export default SearchBar;
//# sourceMappingURL=SearchBar.js.map