import React from "react";
import AlertComponent from "../alert/alert.component";
import ChatSendMessage from "../chat-send-message/chat-send-message.component";
import LoadingSpinner from "../loading-spinner/loading-spinner.component";

export default function ChatConversationOpenComponent({
  conversation,
  messages,
  subState
}) {
  const [loading, error] = subState;
  if (loading) return <LoadingSpinner />;
  if (error) return <AlertComponent message={error.message} type='error' />;

  return (
    <div>
      <div className='messages' style={{ height: "400px" }}>
        <ul>
          {messages.map(item => (
            <li
              key={item.id}
              className={`${item.isoutbound ? "replies" : "sent"}`}>
              <div>
                <p>
                  {item.text} <br /> <i>{item.status}</i>
                </p>
              </div>
            </li>
          ))}
        </ul>
      </div>
      <ChatSendMessage conversation={conversation} />
    </div>
  );
}