import React__default, { useState, useRef, useContext, useMemo } from 'react';
import OpenChannelPreview from './OpenChannelPreview.js';
import { P as PlaceHolder, a as PlaceHolderTypes } from '../../index-49ff1ed1.js';
import IconButton from '../../ui/IconButton.js';
import Icon, { IconTypes, IconColors } from '../../ui/Icon.js';
import { L as Label, a as LabelTypography, b as LabelColors } from '../../index-4372fcec.js';
import { u as useOpenChannelListContext, a as OpenChannelListFetchingStatus, b as OpenChannelListActionTypes } from '../../OpenChannelListProvider-bdc39bee.js';
import CreateOpenChannel from '../../CreateOpenChannel.js';
import { a as LocalizationContext } from '../../LocalizationContext-b2390bf8.js';
import { S as SCROLL_BUFFER } from '../../consts-33537265.js';
import '../../ui/Avatar.js';
import '../../ui/ImageRenderer.js';
import '../../uuid-a79b5ba8.js';
import 'prop-types';
import '../../ui/Loader.js';
import '../../_rollupPluginBabelHelpers-4f8ebde4.js';
import '../../stringSet-eefbc798.js';
import '../../topics-f3629ea0.js';
import '../../useSendbirdStateContext.js';
import '../../withSendbird.js';
import '../../CreateOpenChannel/components/CreateOpenChannelUI.js';
import '../../ui/Button.js';
import '../../ui/Modal.js';
import 'react-dom';
import '../../index-896545a0.js';
import '../../MediaQueryContext-b4904a2e.js';
import '../../index-67135027.js';
import '../../ui/Input.js';
import '../../ui/TextButton.js';
import '../../color-9519a526.js';
import '../../CreateOpenChannel/context.js';

function OpenChannelListUI(_ref) {
  let {
    renderHeader,
    renderChannelPreview,
    renderPlaceHolderEmpty,
    renderPlaceHolderError,
    renderPlaceHolderLoading
  } = _ref;
  const [showCreateChannelModal, setShowCreateChannel] = useState(false);
  const scrollRef = useRef(null);
  const {
    logger,
    currentChannel,
    allChannels,
    fetchingStatus,
    onChannelSelected,
    fetchNextChannels,
    refreshOpenChannelList,
    openChannelListDispatcher
  } = useOpenChannelListContext();
  const {
    stringSet
  } = useContext(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, SCROLL_BUFFER)) {
      fetchNextChannels(messages => {
        if (messages) {
          try {
            element.scrollTop = scrollHeight - clientHeight;
          } catch (error) {
            //
          }
        }
      });
    }
  };
  const handleOnClickCreateChannel = () => {
    setShowCreateChannel(true);
  };
  const MemoizedHeader = useMemo(() => {
    return (renderHeader === null || renderHeader === void 0 ? void 0 : renderHeader()) || null;
  }, [renderHeader]);
  const MemoizedPlaceHolder = useMemo(() => {
    if (fetchingStatus === OpenChannelListFetchingStatus.EMPTY) {
      return (renderPlaceHolderEmpty === null || renderPlaceHolderEmpty === void 0 ? void 0 : renderPlaceHolderEmpty()) || /*#__PURE__*/React__default.createElement(PlaceHolder, {
        className: "sendbird-open-channel-list-ui__channel-list--place-holder--empty",
        type: PlaceHolderTypes.NO_CHANNELS
      });
    }
    if (fetchingStatus === OpenChannelListFetchingStatus.FETCHING) {
      return (renderPlaceHolderLoading === null || renderPlaceHolderLoading === void 0 ? void 0 : renderPlaceHolderLoading()) || /*#__PURE__*/React__default.createElement("div", {
        className: "sendbird-open-channel-list-ui__channel-list--place-holder--loading"
      }, /*#__PURE__*/React__default.createElement(PlaceHolder, {
        iconSize: "24px",
        type: PlaceHolderTypes.LOADING
      }));
    }
    if (fetchingStatus === OpenChannelListFetchingStatus.ERROR) {
      return (renderPlaceHolderError === null || renderPlaceHolderError === void 0 ? void 0 : renderPlaceHolderError()) || /*#__PURE__*/React__default.createElement(PlaceHolder, {
        className: "sendbird-open-channel-list-ui__channel-list--place-holder--error",
        type: PlaceHolderTypes.WRONG
      });
    }
    return null;
  }, [fetchingStatus, renderPlaceHolderEmpty, renderPlaceHolderLoading, renderPlaceHolderError]);
  const MemoizedAllChannels = useMemo(() => {
    if (fetchingStatus === 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: OpenChannelListActionTypes.SET_CURRENT_OPEN_CHANNEL,
            payload: channel
          });
        };
        return renderChannelPreview ? /*#__PURE__*/React__default.createElement("div", {
          className: "sendbird-open-channel-list-ui__channel-list__item",
          onClick: handleClick
        }, renderChannelPreview({
          channel,
          isSelected,
          onChannelSelected
        })) : /*#__PURE__*/React__default.createElement(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.createElement("div", {
    className: "sendbird-open-channel-list-ui"
  }, showCreateChannelModal && /*#__PURE__*/React__default.createElement(CreateOpenChannel, {
    closeModal: () => setShowCreateChannel(false),
    onCreateChannel: openChannel => {
      onChannelSelected === null || onChannelSelected === void 0 ? void 0 : onChannelSelected(openChannel);
      openChannelListDispatcher({
        type: OpenChannelListActionTypes.CREATE_OPEN_CHANNEL,
        payload: openChannel
      });
    }
  }), MemoizedHeader || /*#__PURE__*/React__default.createElement("div", {
    className: "sendbird-open-channel-list-ui__header"
  }, /*#__PURE__*/React__default.createElement(Label, {
    className: "sendbird-open-channel-list-ui__header__title",
    type: LabelTypography.H_2,
    color: LabelColors.ONBACKGROUND_1
  }, stringSet.OPEN_CHANNEL_LIST__TITLE), /*#__PURE__*/React__default.createElement(IconButton, {
    className: "sendbird-open-channel-list-ui__header__button-refresh",
    width: "32px",
    height: "32px",
    type: "button",
    onClick: () => refreshOpenChannelList()
  }, /*#__PURE__*/React__default.createElement(Icon, {
    type: IconTypes.REFRESH,
    fillColor: IconColors.PRIMARY,
    width: "22px",
    height: "22px"
  })), /*#__PURE__*/React__default.createElement(IconButton, {
    className: "sendbird-open-channel-list-ui__header__button-create-channel",
    width: "32px",
    height: "32px",
    type: "button",
    onClick: handleOnClickCreateChannel
  }, /*#__PURE__*/React__default.createElement(Icon, {
    type: IconTypes.CREATE,
    fillColor: IconColors.PRIMARY,
    width: "22px",
    height: "22px"
  }))), /*#__PURE__*/React__default.createElement("div", {
    className: "sendbird-open-channel-list-ui__channel-list",
    ref: scrollRef,
    onScroll: handleScroll
  }, MemoizedPlaceHolder, MemoizedAllChannels));
}

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