import React from "react";
import AlertComponent from "../alert/alert.component";
import ChatConversationTitle from "../chat-conversation-title/chat-conversation-title.component";
import ChatMessageListComponent from "../chat-messages-list/chat-message-list.component";
import ChatSendMessage from "../chat-send-message/chat-send-message.component";
import LoadingSkeleton from "../loading-skeleton/loading-skeleton.component.jsx";
import "./chat-conversation.styles.scss";

export default function ChatConversationComponent({
  subState,
  conversation,
  handleMarkConversationAsRead,
}) {
  const [loading, error] = subState;

  if (loading) return <LoadingSkeleton />;
  if (error) return <AlertComponent message={error.message} type="error" />;

  const messages = (conversation && conversation.messages) || [];

  return (
    <div
      className="chat-conversation"
      onMouseDown={handleMarkConversationAsRead}
      onKeyDown={handleMarkConversationAsRead}
    >
      <ChatConversationTitle conversation={conversation} />
      <ChatMessageListComponent messages={messages} />
      <ChatSendMessage conversation={conversation} />
    </div>
  );
}