import SidebarHeader from "./SidebarHeader";
import useSidebarVisibility from "./useSidebarVisibility";
import "./Sidebar.css";
import { UsersData } from "../../background/types/roomData";
import useMeetingStarted from "../../hooks/useMeetingStarted";
import { useRoomName } from "../../hooks/useRoomName";
import Chat from "../chat/Chat";

interface Props {
  usersData: UsersData;
  sendMessage: Function
}

function Sidebar(props: Props) {
  const { sidebarVisibility, toggleSidebarVisibility, sidebarToggleText } =
    useSidebarVisibility();
  const [_, setMeetingStarted] = useMeetingStarted()
  const { updateAndSubmitRoomName: updateAndSubmitRoomName } = useRoomName();

  return (
    <div className={`sidebar sidebar-${sidebarVisibility}`}>
      <SidebarHeader sidebarVisibility={sidebarVisibility} />
      <div>
        {props.usersData.roomsData.map((roomData) => {
          return (
            <>
              <h3>
                <a href="#" onClick={() => {
                  updateAndSubmitRoomName(roomData.roomName)
                  setMeetingStarted(true)
                }}>
                  {roomData.roomName}
                </a>
              </h3>
              {roomData.participants.map((participant) => (
                <div key={participant.jid}> {participant.displayName} </div>
              ))}
            </>
          );
        })}
      </div>
      <div>
        <h3> No room</h3>
        {props.usersData.usersWithOutRoom.map((user) => (
          <div key={user.uuid}>{user.name}</div>
        ))}
      </div>
      <div className="sidebar-footer">
        <Chat sendMessage={props.sendMessage} />
        <button className="sidebar-toggle" onClick={toggleSidebarVisibility}>{sidebarToggleText}</button>
      </div>
    </div>
  );
}

export default Sidebar;