import React, { memo } from 'react';
import { ChatMessageHeader } from './chat-message-header';
import { ChatMessageBody } from './chat-message-body';
import { DEFAULT_VALUE } from './constants';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
function ChatMessageBase({
  itemKey,
  username,
  avatarUrl,
  timestamp,
  textBoxAriaLabel,
  onChange,
  onSubmit,
  onMention,
  onBlur,
  maxLength,
  getCharactersCounterString,
  mentions,
  options,
  actions,
  onSelect,
  isInEditMode,
  onActionBtnClick,
  optionsTriggerAriaLabel,
  mentionsPropmptText,
  autoFocus,
  value = DEFAULT_VALUE
}) {
  return /*#__PURE__*/_jsxs("div", {
    className: "chat-item",
    children: [/*#__PURE__*/_jsx(ChatMessageHeader, {
      timestamp: timestamp,
      username: username,
      avatarUrl: avatarUrl,
      options: options,
      itemKey: itemKey,
      onSelect: onSelect,
      optionsTriggerAriaLabel: optionsTriggerAriaLabel
    }), /*#__PURE__*/_jsx(ChatMessageBody, {
      itemKey: itemKey,
      value: value,
      onChange: onChange,
      onSubmit: onSubmit,
      readOnly: !isInEditMode,
      maxLength: maxLength,
      getCharactersCounterString: getCharactersCounterString,
      mentions: mentions,
      actions: actions,
      onActionBtnClick: onActionBtnClick,
      onMention: onMention,
      onBlur: onBlur,
      textBoxAriaLabel: textBoxAriaLabel,
      mentionsPropmptText: mentionsPropmptText,
      autoFocus: autoFocus
    })]
  });
}
ChatMessageBase.displayName = 'ChatMessage';
export const ChatMessage = /*#__PURE__*/memo(ChatMessageBase);