import React__default, { useRef, useState, useMemo } from 'react';
import { i as isSameDay } from '../../index-1a5c804a.js';
import Icon, { IconTypes, IconColors } from '../../ui/Icon.js';
import { P as PlaceHolder, a as PlaceHolderTypes } from '../../index-04212901.js';
import { u as useOpenChannelContext, c as compareMessagesForGrouping } from '../../OpenChannelProvider-44644559.js';
import MessagOpenChannelMessageeHoc from './OpenChannelMessage.js';
import '../../index-bbd69eed.js';
import '../../index-8a738c8a.js';
import 'prop-types';
import '../../tslib.es6-88db6fd7.js';
import '../../LocalizationContext-a600fb50.js';
import '../../stringSet-91224dde.js';
import '../../index-191a1508.js';
import '../../ui/Loader.js';
import '../../UserProfileContext-14ece55d.js';
import '../../compareIds-62c0f89f.js';
import '../../topics-43edce25.js';
import '@sendbird/chat';
import '@sendbird/chat/openChannel';
import '../../uuid-a6fa7f5c.js';
import '../../useSendbirdStateContext.js';
import '../../withSendbird.js';
import '../../_rollupPluginBabelHelpers-409f988a.js';
import '../../ui/OpenchannelUserMessage.js';
import '../../ui/Avatar.js';
import '../../ui/ImageRenderer.js';
import '../../ui/ContextMenu.js';
import 'react-dom';
import '../../ui/SortByRow.js';
import '../../index-07f9c3d9.js';
import '../../utils/message/getOutgoingMessageState.js';
import '../../ui/IconButton.js';
import '../../ui/UserProfile.js';
import '../../sendbirdSelectors.js';
import '../../utils-37e7b76b.js';
import '../../ui/Button.js';
import '../../utils-c4ec02f0.js';
import '../../index-2ea0adbb.js';
import '../../MediaQueryContext-bdfbc4af.js';
import '../../useLongPress-9665cd48.js';
import '../../ui/OpenChannelAdminMessage.js';
import '../../ui/OpenchannelOGMessage.js';
import '../../ui/LinkLabel.js';
import '../../ui/Word.js';
import '../../ui/MentionLabel.js';
import '../../ui/OpenchannelThumbnailMessage.js';
import '../../ui/OpenchannelFileMessage.js';
import '../../ui/TextButton.js';
import '../../color-592f66aa.js';
import '../../ui/DateSeparator.js';
import '../../ui/MessageInput.js';
import 'react-dom/server';
import '../../const-654f9496.js';
import '../../const-55d2d983.js';
import '../../ui/MentionUserLabel.js';
import '../../ui/FileViewer.js';
import '../../index-719ce4f1.js';
import '../../ui/Modal.js';

function OpenchannelMessageList(props, ref) {
  var _a = useOpenChannelContext(),
      _b = _a.isMessageGroupingEnabled,
      isMessageGroupingEnabled = _b === void 0 ? true : _b,
      allMessages = _a.allMessages,
      hasMore = _a.hasMore,
      onScroll = _a.onScroll;

  var scrollRef = ref || useRef(null);

  var _c = useState(false),
      showScrollDownButton = _c[0],
      setShowScrollDownButton = _c[1];

  var handleOnScroll = function (e) {
    var element = e.target;
    var scrollTop = element.scrollTop,
        scrollHeight = element.scrollHeight,
        clientHeight = element.clientHeight;

    if (scrollHeight > scrollTop + clientHeight + 1) {
      setShowScrollDownButton(true);
    } else {
      setShowScrollDownButton(false);
    }

    if (!hasMore) {
      return;
    }

    if (scrollTop === 0) {
      var nodes = scrollRef.current.querySelectorAll('.sendbird-msg--scroll-ref');
      var first_1 = nodes && nodes[0];
      onScroll(function () {
        try {
          first_1.scrollIntoView();
        } catch (error) {}
      });
    }
  };

  var scrollToBottom = function () {
    if (scrollRef && scrollRef.current) {
      scrollRef.current.scrollTo(0, scrollRef.current.scrollHeight);
      setShowScrollDownButton(false);
    }
  };

  var memoizedMessageList = useMemo(function () {
    var _a;

    if (allMessages.length > 0) {
      return allMessages.map(function (message, index) {
        var previousMessage = allMessages[index - 1];
        var nextMessage = allMessages[index - 1];
        var previousMessageCreatedAt = previousMessage && previousMessage.createdAt;
        var currentCreatedAt = message === null || message === void 0 ? void 0 : message.createdAt; // https://stackoverflow.com/a/41855608

        var hasSeparator = !(previousMessageCreatedAt && isSameDay(currentCreatedAt, previousMessageCreatedAt));

        var _a = isMessageGroupingEnabled ? compareMessagesForGrouping(previousMessage, message, nextMessage) : [false, false],
            chainTop = _a[0],
            chainBottom = _a[1];

        return /*#__PURE__*/React__default.createElement(MessagOpenChannelMessageeHoc, {
          key: (message === null || message === void 0 ? void 0 : message.messageId) || (message === null || message === void 0 ? void 0 : message.reqId),
          message: message,
          chainTop: chainTop,
          chainBottom: chainBottom,
          hasSeparator: hasSeparator,
          renderMessage: props === null || props === void 0 ? void 0 : props.renderMessage
        });
      });
    }

    return ((_a = props === null || props === void 0 ? void 0 : props.renderPlaceHolderEmptyList) === null || _a === void 0 ? void 0 : _a.call(props)) || /*#__PURE__*/React__default.createElement(PlaceHolder, {
      className: "sendbird-openchannel-conversation-scroll__container__place-holder",
      type: PlaceHolderTypes.NO_MESSAGES
    });
  }, [allMessages]);
  return /*#__PURE__*/React__default.createElement("div", {
    className: "sendbird-openchannel-conversation-scroll"
  }, /*#__PURE__*/React__default.createElement("div", {
    className: "sendbird-openchannel-conversation-scroll__container"
  }, /*#__PURE__*/React__default.createElement("div", {
    className: "sendbird-openchannel-conversation-scroll__container__padding"
  }), /*#__PURE__*/React__default.createElement("div", {
    className: ['sendbird-openchannel-conversation-scroll__container__item-container', allMessages.length > 0 ? '' : 'no-messages'].join(' '),
    onScroll: handleOnScroll,
    ref: scrollRef
  }, memoizedMessageList)), showScrollDownButton && /*#__PURE__*/React__default.createElement("div", {
    className: "sendbird-openchannel-conversation-scroll__container__scroll-bottom-button",
    onClick: scrollToBottom,
    onKeyDown: scrollToBottom,
    tabIndex: 0,
    role: "button"
  }, /*#__PURE__*/React__default.createElement(Icon, {
    width: "24px",
    height: "24px",
    type: IconTypes.CHEVRON_DOWN,
    fillColor: IconColors.CONTENT
  })));
}

var OpenChannelMessageList = /*#__PURE__*/React__default.forwardRef(OpenchannelMessageList);

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