import React from 'react';
import superagent from 'superagent';
import cookie from 'react-cookies';

import MenuPageWrapper from '../Wrappers/MenuPageWrapper.jsx';
import RoomComponent from './RoomComponent.jsx';
import * as ApiUtils from '../CloudApi/ApiUtils.js';

import { 
    Accordion,
    Segment,
    Grid,
    Header,
    Image,
    Icon,
    Button,
    Table,
    Form,
    Divider,
    Label,
    Modal,
    Statistic } from 'semantic-ui-react'

const MAX_BAN_REASON_LENGTH = 10;

export default class ModeratorRoomPage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            room: null
        };
    }

    async componentDidMount() {
        const cloudSchemas = await ApiUtils.getCloudSchemas();

        this.setState({ cloudSchemas });

        await this.reloadRoom();
        setInterval(this.reloadRoom.bind(this), 5000);

        const environmentOptions = await ApiUtils.getEnvironmentOptions();
        this.setState({ environmentOptions });
    }

    async reloadRoom() {
        try {
            const roomId = this.props.match.params.roomId;
            const res = await superagent.get(`/cloud/admin/room/${roomId}`).accept('json');
            console.log(res.body);
            this.setState({ room: res.body.storedRoom,  liveRoom: res.body.liveRoom, roomInstances: res.body.roomInstances, history: res.body.history, ownerBigscreenAccount: res.body.ownerBigscreenAccount });
        } catch (e) {
            console.log(e);
        }
    }

    async onUpdateRoom(roomIndex, event, { name, value }) {
        if (this.state.room) {
            let payload = {};
            payload[name] = value;
            let room = this.state.room;
            if (name === 'environment') {
                room.environmentId = value;
            } else {
                room[name] = value;
            }
            this.setState({ room });
            await superagent.put(`/cloud/admin/room/${room.roomId}`).send(payload).accept('json');
            console.log("updated room");
        }
    }

    onEjectParticipant(user, userIndex, room, roomIndex, e) {
        e.preventDefault();

        if (this.state.liveRoom) {
            let liveRoom = this.state.liveRoom;
            delete liveRoom.participantsIndex[user.userSessionId];
            this.setState({ liveRoom });

            superagent.get(`/cloud/admin/room/${liveRoom.roomId}/users/${user.userSessionId}/eject`).accept('json').end(function(err, res) {
                console.log("User was ejected...");
            }.bind(this));
        }
    }

    onKickParticipant(user, userIndex, room, roomIndex, e) {
        e.preventDefault();

        if (this.state.liveRoom) {
            let liveRoom = this.state.liveRoom;
            delete liveRoom.participantsIndex[user.userSessionId];
            this.setState({ liveRoom });

            superagent.get(`/cloud/admin/room/${liveRoom.roomId}/users/${user.userSessionId}/kick`).accept('json').end(function(err, res) {
                console.log("User was kicked...");
            }.bind(this));
        }
    }

    render() {
        if (this.state.room) {
            return (
                <div>
                    <MenuPageWrapper menuItems={[]} loading={this.state.loading}>
                        <RoomComponent 
                            room={this.state.room}
                            liveRoom={this.state.liveRoom}
                            roomInstances={this.state.roomInstances}
                            history={this.state.history}
                            ownerBigscreenAccount={this.state.ownerBigscreenAccount}
                            environmentOptions={this.state.environmentOptions}
                            cloudSchemas={this.state.cloudSchemas}
                            roomIndex={-1}
                            onReloadRoom={this.reloadRoom.bind(this)}
                            onUpdateRoom={this.onUpdateRoom.bind(this)}
                            onEjectParticipant={this.onEjectParticipant.bind(this)}
                            onKickParticipant={this.onKickParticipant.bind(this)}
                        />
                    </MenuPageWrapper>
                </div>
            );
        } else {
            return (
                <MenuPageWrapper title="" menuItems={[]} loading={true}>
                    <Segment basic loading={true}>
                        <Header as="h2">Room Info</Header>
                    </Segment>
                </MenuPageWrapper>
            );
        }
    }
}