import styles  from './chat.module.css';

import Input from './input.jsx';
import Messages from './messages.jsx';

export default function Chat({
  chatHistory,
  chatHistoryCaret,
  chatInputRef,
  chatMessages,
  onClose,
  message,
  pendingMessage,
  setChatHistoryCaret,
  setChatHistory,
  setMessage,
  setPendingMessage,
}) {
  return (
    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
    <div
      onMouseDown={(event) => {
        event.stopPropagation();
      }}
      onMouseUp={(event) => {
        event.stopPropagation();
      }}
      className={styles.chat}
    >
      <Messages
        chatMessages={chatMessages}
      />
      <Input
        chatHistory={chatHistory}
        chatHistoryCaret={chatHistoryCaret}
        onClose={onClose}
        message={message}
        chatInputRef={chatInputRef}
        pendingMessage={pendingMessage}
        setChatHistory={setChatHistory}
        setChatHistoryCaret={setChatHistoryCaret}
        setMessage={setMessage}
        setPendingMessage={setPendingMessage}
      />
    </div>
  );
}