"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Chat = void 0;
var _react = _interopRequireWildcard(require("react"));
var _chatMessage = require("./chat-message");
var _chatMessageBody = require("./chat-message-body");
var _constants = require("./constants");
var _useTranslation = require("../hooks/use-translation");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
/**
 * slate besed Chat component
 * @uxr-only-supported
 * @midnight-gray-supported
 * @alpine-light-supported
 * @under-development
 * */
const ChatBase = /*#__PURE__*/(0, _react.forwardRef)(function ChatBase({
  onChange,
  onSelect,
  onActionBtnClick,
  newChatMessageItem,
  itemsPlaceholder,
  loadMore,
  onMention,
  onSubmit = () => {},
  onBlur = () => {},
  items = [],
  activeItems = {},
  mentions = [],
  maxLength = 2000,
  getCharactersCounterString,
  optionsTriggerAriaLabel,
  testId = 'chat',
  mentionsPropmptText
}, ref) {
  const {
    t
  } = (0, _useTranslation.useTranslation)();
  const getCharactersCounterStringText = getCharactersCounterString || (count => t('{{count}} characters remaining', {
    count
  }));
  const mentionsPropmptTextValue = mentionsPropmptText ?? t('Start typing to see a list of users');
  const hasItems = !!items.length;
  const observer = (0, _react.useRef)(null);
  const lastItem = (0, _react.useCallback)(node => {
    observer.current?.disconnect();
    if (!node || !loadMore) {
      return;
    }
    observer.current = new IntersectionObserver(entries => {
      if (entries[0].isIntersecting) {
        loadMore();
      }
    });
    observer.current.observe(node);
  }, [loadMore]);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: "chat",
    "test-id": testId,
    children: [hasItems && /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
      className: "chat-items",
      "test-id": `${testId}-messages`,
      ref: ref,
      children: items.map(({
        key,
        username,
        avatarUrl,
        textBoxAriaLabel,
        value: initialValue,
        timestamp,
        options = []
      }, index) => {
        const {
          value,
          isInEditMode = false,
          actions = [],
          autoFocus = true
        } = activeItems[key] ?? {};
        const activeItemValue = value || initialValue;
        return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
          "test-id": `${testId}-message`,
          ref: index === items.length - 1 ? lastItem : null,
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_chatMessage.ChatMessage, {
            onChange: onChange,
            onSubmit: onSubmit,
            onMention: onMention,
            onBlur: onBlur,
            value: activeItemValue,
            initialValue: initialValue,
            maxLength: maxLength,
            getCharactersCounterString: getCharactersCounterStringText,
            itemKey: key,
            timestamp: timestamp,
            username: username,
            avatarUrl: avatarUrl,
            mentions: mentions,
            options: options,
            actions: actions,
            onSelect: onSelect,
            isInEditMode: isInEditMode,
            onActionBtnClick: onActionBtnClick,
            optionsTriggerAriaLabel: optionsTriggerAriaLabel ?? t('Options'),
            textBoxAriaLabel: textBoxAriaLabel ?? t('Chat message'),
            mentionsPropmptText: mentionsPropmptTextValue,
            autoFocus: autoFocus
          })
        }, key);
      })
    }), !hasItems && !!itemsPlaceholder && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "chat-items-placeholder-wrapper",
      "test-id": `${testId}-messages-placeholder`,
      children: itemsPlaceholder
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "chat-new-item",
      "test-id": `${testId}-message-new`,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_chatMessageBody.ChatMessageBody, {
        itemKey: _constants.NEW_ITEM_KEY,
        onChange: onChange,
        onSubmit: onSubmit,
        onMention: onMention,
        maxLength: maxLength,
        readOnly: false,
        value: newChatMessageItem.value,
        getCharactersCounterString: getCharactersCounterStringText,
        mentions: mentions,
        actions: newChatMessageItem.actions,
        onActionBtnClick: onActionBtnClick,
        editableContentClassName: "chat-new-item-editable-content",
        onBlur: onBlur,
        textBoxAriaLabel: newChatMessageItem.textBoxAriaLabel ?? t('New chat message'),
        mentionsPropmptText: mentionsPropmptTextValue,
        autoFocus: newChatMessageItem.autoFocus ?? false
      })
    })]
  });
});
ChatBase.displayName = 'Chat';
const Chat = exports.Chat = /*#__PURE__*/(0, _react.memo)(ChatBase);