import React from 'react';

import MenuPageWrapper from '../../src/components/Wrappers/MenuPageWrapper.jsx';
import RoomsPanel from '../../src/components/Rooms/RoomsPanel.jsx';
import { RoomsUpdater, RoomData } from '../../src/components/Rooms/RoomsUpdater.jsx';

export default class ArdaHome extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loadingRooms: false
        };
    }

    async roomsUpdated() {
        this.setState({ loadingRooms: RoomData.isLoading });
    }

    render() {
        const menuItems = [
            { icon: "home", title: "Home", href: "#top" },
            { icon: "", title: `Public Rooms (${RoomData.rooms.length})`, href: "#public-rooms" },
            { icon: "", title: `TV Rooms (${RoomData.tvRooms.length})`, href: "#tv-rooms" },
            { icon: "", title: `Lobby Rooms (${RoomData.lobbyRooms.length})`, href: "#lobby-rooms" }
        ];

        return (
            <div>
                <a name={"top"} />
                <MenuPageWrapper title="Admin Panel" menuItems={menuItems} >
                    <RoomsUpdater roomUpdateCallback={this.roomsUpdated.bind(this)} />
                    <RoomsPanel />
                </MenuPageWrapper> 
            </div>
        );
    }
}