import React from "react";
import { useSelector } from "react-redux";
import ChatWindow from "./ChatWindow";

const MainContainer = ({ showTerm }) => {
  const { activeRoom } = useSelector((state) => state.chat);

  return (
    <div className="h-100-auto-overflow w-100">
      {showTerm === "chats" || showTerm === "requests" ? (
        activeRoom !== null ? (
          <ChatWindow room={activeRoom} />
        ) : (
          <div className="w-100 h-100 ps-2 bg-main">
            <div className="w-100 h-100 text-main bg-light d-flex justify-content-center align-items-center">
              <h1 className="display-6">{showTerm === "chats" && "Please choose a chat room."}</h1>
            </div>
          </div>
        )
      ) : (
        ""
      )}
      {showTerm === "empty" && ""}
    </div>
  );
};

export default MainContainer;
