import React, { memo, forwardRef, useCallback, useRef } from 'react';
import { ChatMessage } from './chat-message';
import { ChatMessageBody } from './chat-message-body';
import { NEW_ITEM_KEY } from './constants';
import { useTranslation } from '../hooks/use-translation';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * slate besed Chat component
 * @uxr-only-supported
 * @midnight-gray-supported
 * @alpine-light-supported
 * @under-development
 * */
const ChatBase = /*#__PURE__*/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
  } = 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 = useRef(null);
  const lastItem = 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__*/_jsxs("div", {
    className: "chat",
    "test-id": testId,
    children: [hasItems && /*#__PURE__*/_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__*/_jsx("li", {
          "test-id": `${testId}-message`,
          ref: index === items.length - 1 ? lastItem : null,
          children: /*#__PURE__*/_jsx(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__*/_jsx("div", {
      className: "chat-items-placeholder-wrapper",
      "test-id": `${testId}-messages-placeholder`,
      children: itemsPlaceholder
    }), /*#__PURE__*/_jsx("div", {
      className: "chat-new-item",
      "test-id": `${testId}-message-new`,
      children: /*#__PURE__*/_jsx(ChatMessageBody, {
        itemKey: 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';
export const Chat = /*#__PURE__*/memo(ChatBase);