'use strict';

var React = require('react');
var OpenChannelList_components_OpenChannelPreview = require('./OpenChannelPreview.js');
var ui_PlaceHolder = require('../../index-9a5e4383.js');
var ui_IconButton = require('../../ui/IconButton.js');
var ui_Icon = require('../../ui/Icon.js');
var ui_Label = require('../../index-2bfd366f.js');
var OpenChannelList_context = require('../../OpenChannelListProvider-42bc1841.js');
var CreateOpenChannel = require('../../CreateOpenChannel.js');
var LocalizationContext = require('../../LocalizationContext-44d2f61b.js');
var consts = require('../../consts-900e72b9.js');
require('../../ui/Avatar.js');
require('../../ui/ImageRenderer.js');
require('../../uuid-dee74248.js');
require('prop-types');
require('../../ui/Loader.js');
require('../../_rollupPluginBabelHelpers-21ae158b.js');
require('../../stringSet-7aebf034.js');
require('../../topics-373d2156.js');
require('../../useSendbirdStateContext.js');
require('../../withSendbird.js');
require('../../CreateOpenChannel/components/CreateOpenChannelUI.js');
require('../../ui/Button.js');
require('../../ui/Modal.js');
require('react-dom');
require('../../index-0a446cca.js');
require('../../MediaQueryContext-5d311a86.js');
require('../../index-88e8fdfa.js');
require('../../ui/Input.js');
require('../../ui/TextButton.js');
require('../../color-0c04efbd.js');
require('../../CreateOpenChannel/context.js');

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

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

function OpenChannelListUI(_ref) {
  let {
    renderHeader,
    renderChannelPreview,
    renderPlaceHolderEmpty,
    renderPlaceHolderError,
    renderPlaceHolderLoading
  } = _ref;
  const [showCreateChannelModal, setShowCreateChannel] = React.useState(false);
  const scrollRef = React.useRef(null);
  const {
    logger,
    currentChannel,
    allChannels,
    fetchingStatus,
    onChannelSelected,
    fetchNextChannels,
    refreshOpenChannelList,
    openChannelListDispatcher
  } = OpenChannelList_context.useOpenChannelListContext();
  const {
    stringSet
  } = React.useContext(LocalizationContext.LocalizationContext);
  const handleScroll = e => {
    const element = e.target;
    const {
      scrollTop,
      clientHeight,
      scrollHeight
    } = element;
    const isAboutSame = (a, b, px) => Math.abs(a - b) <= px;
    if (isAboutSame(clientHeight + scrollTop, scrollHeight, consts.SCROLL_BUFFER)) {
      fetchNextChannels(messages => {
        if (messages) {
          try {
            element.scrollTop = scrollHeight - clientHeight;
          } catch (error) {
            //
          }
        }
      });
    }
  };
  const handleOnClickCreateChannel = () => {
    setShowCreateChannel(true);
  };
  const MemoizedHeader = React.useMemo(() => {
    return (renderHeader === null || renderHeader === void 0 ? void 0 : renderHeader()) || null;
  }, [renderHeader]);
  const MemoizedPlaceHolder = React.useMemo(() => {
    if (fetchingStatus === OpenChannelList_context.OpenChannelListFetchingStatus.EMPTY) {
      return (renderPlaceHolderEmpty === null || renderPlaceHolderEmpty === void 0 ? void 0 : renderPlaceHolderEmpty()) || /*#__PURE__*/React__default["default"].createElement(ui_PlaceHolder.PlaceHolder, {
        className: "sendbird-open-channel-list-ui__channel-list--place-holder--empty",
        type: ui_PlaceHolder.PlaceHolderTypes.NO_CHANNELS
      });
    }
    if (fetchingStatus === OpenChannelList_context.OpenChannelListFetchingStatus.FETCHING) {
      return (renderPlaceHolderLoading === null || renderPlaceHolderLoading === void 0 ? void 0 : renderPlaceHolderLoading()) || /*#__PURE__*/React__default["default"].createElement("div", {
        className: "sendbird-open-channel-list-ui__channel-list--place-holder--loading"
      }, /*#__PURE__*/React__default["default"].createElement(ui_PlaceHolder.PlaceHolder, {
        iconSize: "24px",
        type: ui_PlaceHolder.PlaceHolderTypes.LOADING
      }));
    }
    if (fetchingStatus === OpenChannelList_context.OpenChannelListFetchingStatus.ERROR) {
      return (renderPlaceHolderError === null || renderPlaceHolderError === void 0 ? void 0 : renderPlaceHolderError()) || /*#__PURE__*/React__default["default"].createElement(ui_PlaceHolder.PlaceHolder, {
        className: "sendbird-open-channel-list-ui__channel-list--place-holder--error",
        type: ui_PlaceHolder.PlaceHolderTypes.WRONG
      });
    }
    return null;
  }, [fetchingStatus, renderPlaceHolderEmpty, renderPlaceHolderLoading, renderPlaceHolderError]);
  const MemoizedAllChannels = React.useMemo(() => {
    if (fetchingStatus === OpenChannelList_context.OpenChannelListFetchingStatus.DONE) {
      return allChannels.map(channel => {
        const isSelected = (channel === null || channel === void 0 ? void 0 : channel.url) === (currentChannel === null || currentChannel === void 0 ? void 0 : currentChannel.url);
        const handleClick = e => {
          onChannelSelected === null || onChannelSelected === void 0 ? void 0 : onChannelSelected(channel, e);
          logger.info('OpenChannelList|ChannelPreview: A channel is selected', channel);
          openChannelListDispatcher({
            type: OpenChannelList_context.OpenChannelListActionTypes.SET_CURRENT_OPEN_CHANNEL,
            payload: channel
          });
        };
        return renderChannelPreview ? /*#__PURE__*/React__default["default"].createElement("div", {
          className: "sendbird-open-channel-list-ui__channel-list__item",
          onClick: handleClick
        }, renderChannelPreview({
          channel,
          isSelected,
          onChannelSelected
        })) : /*#__PURE__*/React__default["default"].createElement(OpenChannelList_components_OpenChannelPreview, {
          className: "sendbird-open-channel-list-ui__channel-list__item",
          channel: channel,
          isSelected: isSelected,
          onClick: handleClick,
          key: channel === null || channel === void 0 ? void 0 : channel.url
        });
      });
    }
    return null;
  }, [allChannels, allChannels.length, currentChannel]);
  return /*#__PURE__*/React__default["default"].createElement("div", {
    className: "sendbird-open-channel-list-ui"
  }, showCreateChannelModal && /*#__PURE__*/React__default["default"].createElement(CreateOpenChannel, {
    closeModal: () => setShowCreateChannel(false),
    onCreateChannel: openChannel => {
      onChannelSelected === null || onChannelSelected === void 0 ? void 0 : onChannelSelected(openChannel);
      openChannelListDispatcher({
        type: OpenChannelList_context.OpenChannelListActionTypes.CREATE_OPEN_CHANNEL,
        payload: openChannel
      });
    }
  }), MemoizedHeader || /*#__PURE__*/React__default["default"].createElement("div", {
    className: "sendbird-open-channel-list-ui__header"
  }, /*#__PURE__*/React__default["default"].createElement(ui_Label.Label, {
    className: "sendbird-open-channel-list-ui__header__title",
    type: ui_Label.LabelTypography.H_2,
    color: ui_Label.LabelColors.ONBACKGROUND_1
  }, stringSet.OPEN_CHANNEL_LIST__TITLE), /*#__PURE__*/React__default["default"].createElement(ui_IconButton, {
    className: "sendbird-open-channel-list-ui__header__button-refresh",
    width: "32px",
    height: "32px",
    type: "button",
    onClick: () => refreshOpenChannelList()
  }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
    type: ui_Icon.IconTypes.REFRESH,
    fillColor: ui_Icon.IconColors.PRIMARY,
    width: "22px",
    height: "22px"
  })), /*#__PURE__*/React__default["default"].createElement(ui_IconButton, {
    className: "sendbird-open-channel-list-ui__header__button-create-channel",
    width: "32px",
    height: "32px",
    type: "button",
    onClick: handleOnClickCreateChannel
  }, /*#__PURE__*/React__default["default"].createElement(ui_Icon["default"], {
    type: ui_Icon.IconTypes.CREATE,
    fillColor: ui_Icon.IconColors.PRIMARY,
    width: "22px",
    height: "22px"
  }))), /*#__PURE__*/React__default["default"].createElement("div", {
    className: "sendbird-open-channel-list-ui__channel-list",
    ref: scrollRef,
    onScroll: handleScroll
  }, MemoizedPlaceHolder, MemoizedAllChannels));
}

module.exports = OpenChannelListUI;
//# sourceMappingURL=OpenChannelListUI.js.map
