'use strict';

var React = require('react');
var MessageSearch_components_MessageSearchUI = require('./MessageSearch/components/MessageSearchUI.js');
var LocalizationContext = require('./chunks/bundle-DDNdw3A9.js');
var ui_Icon = require('./ui/Icon.js');
var ui_Loader = require('./ui/Loader.js');
var useMessageSearch = require('./chunks/bundle-j0RMwIZ5.js');
var ui_Header = require('./ui/Header.js');
require('./ui/MessageSearchItem.js');
require('./chunks/bundle-CxoFSSXv.js');
require('./chunks/bundle-FJtjwZwh.js');
require('./chunks/bundle-C1G0SKDq.js');
require('./chunks/bundle-BV7y6VDn.js');
require('./chunks/bundle-CBLzrxjV.js');
require('./chunks/bundle-B9BY1g5d.js');
require('./chunks/bundle-CLL-nCFU.js');
require('./ui/ImageRenderer.js');
require('./chunks/bundle-DQNu-S6D.js');
require('./chunks/bundle-C8MACRPO.js');
require('./chunks/bundle-B0UICprZ.js');
require('./chunks/bundle-EhtiN7UV.js');
require('./ui/PlaceHolder.js');
require('./ui/MessageSearchFileItem.js');
require('./chunks/bundle-D7YiKR6i.js');
require('@sendbird/chat/groupChannel');
require('./utils/message/getOutgoingMessageState.js');
require('./chunks/bundle-dfqZUdij.js');
require('./chunks/bundle-Dn0hi6OJ.js');
require('./chunks/bundle-yU9Mr2pS.js');
require('./chunks/bundle-BPGU6BH2.js');
require('./chunks/bundle-AAO7jUU2.js');
require('./chunks/bundle-LI9JjqG2.js');
require('@sendbird/chat');
require('@sendbird/chat/openChannel');
require('./chunks/bundle-CyQD5TkW.js');
require('./ui/TextButton.js');
require('./chunks/bundle-BIrmQghI.js');
require('./ui/IconButton.js');

function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefaultCompat(React);

function MessageSearchPannel(props) {
    var channelUrl = props.channelUrl, onResultClick = props.onResultClick, onCloseClick = props.onCloseClick, messageSearchQuery = props.messageSearchQuery, renderPlaceHolderError = props.renderPlaceHolderError, renderPlaceHolderLoading = props.renderPlaceHolderLoading, renderPlaceHolderNoString = props.renderPlaceHolderNoString, renderPlaceHolderEmptyList = props.renderPlaceHolderEmptyList, renderSearchItem = props.renderSearchItem;
    var _a = React.useState(''), searchString = _a[0], setSearchString = _a[1];
    var _b = React.useState(''), inputString = _b[0], setInputString = _b[1];
    var _c = React.useState(false), loading = _c[0], setLoading = _c[1];
    var stringSet = React.useContext(LocalizationContext.LocalizationContext).stringSet;
    var timeout = null;
    React.useEffect(function () {
        if (timeout) {
            clearTimeout(timeout);
        }
        timeout = setTimeout(function () {
            setSearchString(inputString);
            setLoading(true);
            timeout = null;
        }, 500);
    }, [inputString]);
    var handleOnChangeInputString = function (e) {
        setInputString(e.target.value);
    };
    var handleOnResultLoaded = function () {
        setLoading(false);
    };
    var handleOnClickResetStringButton = function (e) {
        e.stopPropagation();
        setInputString('');
        setSearchString('');
    };
    return (React__default.default.createElement("div", { className: "sendbird-message-search-pannel" },
        React__default.default.createElement(ui_Header.default, { className: "sendbird-message-search-pannel__header", renderMiddle: function () { return (React__default.default.createElement(ui_Header.default.Title, { title: stringSet.SEARCH_IN_CHANNEL })); }, renderRight: function () { return (React__default.default.createElement(ui_Header.default.IconButton, { className: "sendbird-message-search-pannel__header__close-button", onClick: onCloseClick, type: ui_Icon.IconTypes.CLOSE, color: ui_Icon.IconColors.ON_BACKGROUND_1 })); } }),
        React__default.default.createElement("div", { className: "sendbird-message-search-pannel__input" },
            React__default.default.createElement("div", { className: "sendbird-message-search-pannel__input__container" },
                React__default.default.createElement(ui_Icon.default, { className: "sendbird-message-search-pannel__input__container__search-icon", type: ui_Icon.IconTypes.SEARCH, fillColor: ui_Icon.IconColors.ON_BACKGROUND_3, width: "24px", height: "24px" }),
                React__default.default.createElement("input", { className: "sendbird-message-search-pannel__input__container__input-area", placeholder: stringSet.SEARCH, value: inputString, onChange: handleOnChangeInputString }),
                inputString && loading && (React__default.default.createElement(ui_Loader, { className: "sendbird-message-search-pannel__input__container__spinner", width: "20px", height: "20px" },
                    React__default.default.createElement(ui_Icon.default, { type: ui_Icon.IconTypes.SPINNER, fillColor: ui_Icon.IconColors.PRIMARY, width: "20px", height: "20px" }))),
                !loading && inputString && (React__default.default.createElement(ui_Icon.default, { className: "sendbird-message-search-pannel__input__container__reset-input-button", type: ui_Icon.IconTypes.REMOVE, fillColor: ui_Icon.IconColors.ON_BACKGROUND_3, width: "20px", height: "20px", onClick: handleOnClickResetStringButton })))),
        React__default.default.createElement("div", { className: "sendbird-message-search-pannel__message-search" },
            React__default.default.createElement(useMessageSearch.MessageSearchProvider, { channelUrl: channelUrl, searchString: searchString, onResultClick: onResultClick, onResultLoaded: handleOnResultLoaded, messageSearchQuery: messageSearchQuery },
                React__default.default.createElement(MessageSearch_components_MessageSearchUI.MessageSearchUI, { renderPlaceHolderError: renderPlaceHolderError, renderPlaceHolderLoading: renderPlaceHolderLoading, renderPlaceHolderNoString: renderPlaceHolderNoString, renderPlaceHolderEmptyList: renderPlaceHolderEmptyList, renderSearchItem: renderSearchItem })))));
}

module.exports = MessageSearchPannel;
//# sourceMappingURL=MessageSearch.js.map
