'use strict';

var React = require('react');
var MessageSearch_components_MessageSearchUI = require('./MessageSearch/components/MessageSearchUI.js');
var LocalizationContext = require('./LocalizationContext-8cc9717d.js');
var ui_Icon = require('./ui/Icon.js');
var ui_IconButton = require('./ui/IconButton.js');
var ui_Label = require('./index-35633fb6.js');
var ui_Loader = require('./ui/Loader.js');
var MessageSearch_context = require('./MessageSearch/context.js');
require('./ui/MessageSearchItem.js');
require('./index-3fc4f7d7.js');
require('./index-d749c4c2.js');
require('./index-0e24aca4.js');
require('./index-bf8f9551.js');
require('./ui/Avatar.js');
require('./ui/ImageRenderer.js');
require('./uuid-1eceb0c8.js');
require('./index-985a1afb.js');
require('./ui/MessageSearchFileItem.js');
require('./index-a91b85d9.js');
require('./_rollupPluginBabelHelpers-acf412a3.js');
require('./utils/message/getOutgoingMessageState.js');
require('./stringSet-ce782136.js');
require('prop-types');
require('./useSendbirdStateContext.js');
require('./withSendbird.js');

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

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

const COMPONENT_CLASS_NAME = 'sendbird-message-search-pannel';
function MessageSearchPannel(props) {
  const {
    channelUrl,
    onResultClick,
    onCloseClick,
    messageSearchQuery,
    renderPlaceHolderError,
    renderPlaceHolderLoading,
    renderPlaceHolderNoString,
    renderPlaceHolderEmptyList,
    renderSearchItem
  } = props;
  const [searchString, setSearchString] = React.useState('');
  const [inputString, setInputString] = React.useState('');
  const [loading, setLoading] = React.useState(false);
  const {
    stringSet
  } = React.useContext(LocalizationContext.LocalizationContext);
  let timeout = null;
  React.useEffect(() => {
    if (timeout) {
      clearTimeout(timeout);
    }
    timeout = setTimeout(() => {
      setSearchString(inputString);
      setLoading(true);
      timeout = null;
    }, 500);
  }, [inputString]);
  const handleOnChangeInputString = e => {
    setInputString(e.target.value);
  };
  const handleOnResultLoaded = () => {
    setLoading(false);
  };
  const handleOnClickResetStringButton = e => {
    e.stopPropagation();
    setInputString('');
    setSearchString('');
  };
  return /*#__PURE__*/React__default["default"].createElement("div", {
    className: COMPONENT_CLASS_NAME
  }, /*#__PURE__*/React__default["default"].createElement("div", {
    className: `${COMPONENT_CLASS_NAME}__header`
  }, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
    className: `${COMPONENT_CLASS_NAME}__header__title`,
    type: ui_Label.LabelTypography.H_2,
    color: ui_Label.LabelColors.ONBACKGROUND_1
  }, stringSet.SEARCH_IN_CHANNEL), /*#__PURE__*/React__default["default"].createElement(ui_IconButton, {
    className: `${COMPONENT_CLASS_NAME}__header__close-button`,
    width: "32px",
    height: "32px",
    onClick: onCloseClick
  }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
    type: ui_Icon.IconTypes.CLOSE,
    fillColor: ui_Icon.IconColors.ON_BACKGROUND_1,
    width: "22px",
    height: "22px"
  }))), /*#__PURE__*/React__default["default"].createElement("div", {
    className: `${COMPONENT_CLASS_NAME}__input`
  }, /*#__PURE__*/React__default["default"].createElement("div", {
    className: `${COMPONENT_CLASS_NAME}__input__container`
  }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
    className: `${COMPONENT_CLASS_NAME}__input__container__search-icon`,
    type: ui_Icon.IconTypes.SEARCH,
    fillColor: ui_Icon.IconColors.ON_BACKGROUND_3,
    width: "24px",
    height: "24px"
  }), /*#__PURE__*/React__default["default"].createElement("input", {
    className: `${COMPONENT_CLASS_NAME}__input__container__input-area`,
    placeholder: stringSet.SEARCH,
    value: inputString,
    onChange: handleOnChangeInputString
  }), inputString && loading && /*#__PURE__*/React__default["default"].createElement(ui_Loader, {
    className: `${COMPONENT_CLASS_NAME}__input__container__spinner`,
    width: "20px",
    height: "20px"
  }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
    type: ui_Icon.IconTypes.SPINNER,
    fillColor: ui_Icon.IconColors.PRIMARY,
    width: "20px",
    height: "20px"
  })), !loading && inputString && /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
    className: `${COMPONENT_CLASS_NAME}__input__container__reset-input-button`,
    type: ui_Icon.IconTypes.REMOVE,
    fillColor: ui_Icon.IconColors.ON_BACKGROUND_3,
    width: "20px",
    height: "20px",
    onClick: handleOnClickResetStringButton
  }))), /*#__PURE__*/React__default["default"].createElement("div", {
    className: `${COMPONENT_CLASS_NAME}__message-search`
  }, /*#__PURE__*/React__default["default"].createElement(MessageSearch_context.MessageSearchProvider, {
    channelUrl: channelUrl,
    searchString: searchString,
    onResultClick: onResultClick,
    onResultLoaded: handleOnResultLoaded,
    messageSearchQuery: messageSearchQuery
  }, /*#__PURE__*/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
