import SidebarHeader from "./SidebarHeader";
import useSidebarVisibility from "./useSidebarVisibility";
import "./Sidebar.css";
import { UsersData } from "../../background/types/roomData";

interface Props {
  usersData: UsersData;
}

function Sidebar(props: Props) {
  const { sidebarVisibility, toggleSidebarVisibility, sidebarToggleText } =
    useSidebarVisibility();

  return (
    <div className={`sidebar sidebar-${sidebarVisibility}`}>
      <SidebarHeader sidebarVisibility={sidebarVisibility} />
      <div>
        <h3> No room</h3>
        {props.usersData.usersWithOutRoom.map((username) => (
          <div>{username}</div>
        ))}
      </div>
      <div>
        {props.usersData.roomsData.map((roomData) => {
          return (
            <>
              <h3> {roomData.roomName} </h3>
              {roomData.participants.map((participant) => (
                <div> {participant.displayName} </div>
              ))}
            </>
          );
        })}
      </div>
      <div className="sidebar-footer">
        <button onClick={toggleSidebarVisibility}>{sidebarToggleText}</button>
      </div>
    </div>
  );
}

export default Sidebar;