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 className="sidebar-body">
                {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">
                {sidebarVisibility === 'full' && <Chat sendMessage={props.sendMessage} />}
                <button className="sidebar-toggle" onClick={toggleSidebarVisibility}>
                    {sidebarToggleText}
                </button>
            </div>
        </div>
    )
}

export default Sidebar