import React__default, { useState, useContext, useEffect } from 'react';
import { MessageSearchUI } from './MessageSearch/components/MessageSearchUI.js';
import { a as LocalizationContext } from './LocalizationContext-b2390bf8.js';
import Icon, { IconTypes, IconColors } from './ui/Icon.js';
import IconButton from './ui/IconButton.js';
import { L as Label, a as LabelTypography, b as LabelColors } from './index-4372fcec.js';
import Loader from './ui/Loader.js';
import { MessageSearchProvider } from './MessageSearch/context.js';
import './ui/MessageSearchItem.js';
import './index-2dc53ac2.js';
import './index-67135027.js';
import './index-0d1114ee.js';
import './index-39306dfb.js';
import './ui/Avatar.js';
import './ui/ImageRenderer.js';
import './uuid-a79b5ba8.js';
import './index-49ff1ed1.js';
import './ui/MessageSearchFileItem.js';
import './index-eefb44ba.js';
import './_rollupPluginBabelHelpers-4f8ebde4.js';
import './utils/message/getOutgoingMessageState.js';
import './stringSet-eefbc798.js';
import 'prop-types';
import './useSendbirdStateContext.js';
import './withSendbird.js';

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] = useState('');
  const [inputString, setInputString] = useState('');
  const [loading, setLoading] = useState(false);
  const {
    stringSet
  } = useContext(LocalizationContext);
  let timeout = null;
  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.createElement("div", {
    className: COMPONENT_CLASS_NAME
  }, /*#__PURE__*/React__default.createElement("div", {
    className: `${COMPONENT_CLASS_NAME}__header`
  }, /*#__PURE__*/React__default.createElement(Label, {
    className: `${COMPONENT_CLASS_NAME}__header__title`,
    type: LabelTypography.H_2,
    color: LabelColors.ONBACKGROUND_1
  }, stringSet.SEARCH_IN_CHANNEL), /*#__PURE__*/React__default.createElement(IconButton, {
    className: `${COMPONENT_CLASS_NAME}__header__close-button`,
    width: "32px",
    height: "32px",
    onClick: onCloseClick
  }, /*#__PURE__*/React__default.createElement(Icon, {
    type: IconTypes.CLOSE,
    fillColor: IconColors.ON_BACKGROUND_1,
    width: "22px",
    height: "22px"
  }))), /*#__PURE__*/React__default.createElement("div", {
    className: `${COMPONENT_CLASS_NAME}__input`
  }, /*#__PURE__*/React__default.createElement("div", {
    className: `${COMPONENT_CLASS_NAME}__input__container`
  }, /*#__PURE__*/React__default.createElement(Icon, {
    className: `${COMPONENT_CLASS_NAME}__input__container__search-icon`,
    type: IconTypes.SEARCH,
    fillColor: IconColors.ON_BACKGROUND_3,
    width: "24px",
    height: "24px"
  }), /*#__PURE__*/React__default.createElement("input", {
    className: `${COMPONENT_CLASS_NAME}__input__container__input-area`,
    placeholder: stringSet.SEARCH,
    value: inputString,
    onChange: handleOnChangeInputString
  }), inputString && loading && /*#__PURE__*/React__default.createElement(Loader, {
    className: `${COMPONENT_CLASS_NAME}__input__container__spinner`,
    width: "20px",
    height: "20px"
  }, /*#__PURE__*/React__default.createElement(Icon, {
    type: IconTypes.SPINNER,
    fillColor: IconColors.PRIMARY,
    width: "20px",
    height: "20px"
  })), !loading && inputString && /*#__PURE__*/React__default.createElement(Icon, {
    className: `${COMPONENT_CLASS_NAME}__input__container__reset-input-button`,
    type: IconTypes.REMOVE,
    fillColor: IconColors.ON_BACKGROUND_3,
    width: "20px",
    height: "20px",
    onClick: handleOnClickResetStringButton
  }))), /*#__PURE__*/React__default.createElement("div", {
    className: `${COMPONENT_CLASS_NAME}__message-search`
  }, /*#__PURE__*/React__default.createElement(MessageSearchProvider, {
    channelUrl: channelUrl,
    searchString: searchString,
    onResultClick: onResultClick,
    onResultLoaded: handleOnResultLoaded,
    messageSearchQuery: messageSearchQuery
  }, /*#__PURE__*/React__default.createElement(MessageSearchUI, {
    renderPlaceHolderError: renderPlaceHolderError,
    renderPlaceHolderLoading: renderPlaceHolderLoading,
    renderPlaceHolderNoString: renderPlaceHolderNoString,
    renderPlaceHolderEmptyList: renderPlaceHolderEmptyList,
    renderSearchItem: renderSearchItem
  }))));
}

export { MessageSearchPannel as default };
//# sourceMappingURL=MessageSearch.js.map
