import React from 'react';
import superagent from 'superagent';
import { fromUnixTime, formatDistanceToNow } from "date-fns";
import { Icon, Button, Table, Form, Label } from 'semantic-ui-react'

import { renderCompactTitle } from './RoomComponent.jsx';
import constants from '../CloudApi/Constants.js';


export default class RoomsTable extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loadingRooms: false,
            activeIndex: -1,
            selectedRoomIndex: 0,
            statistics: {
                onlineUserCount: 0,
                roomCount: 0
            },
            autoUpdate: true,
            usersInChannels: 0,
            lastUpdated: "",
        };
    }

    renderCompactRoomInfo(room, roomIndex) {
        const isNSFWRoom = room.category === "NSFW";
        const description = _.trim(room.description).length > 0 ? "\"" + room.description + "\"" : `(No description)`;
        const participantsCount = (room.participantsIndex ? Object.keys(room.participantsIndex).length : 0);
        const fromNow = formatDistanceToNow(new Date(room.createdAt), { addSuffix: true });

        let ownerLink = null;
        if (room.owner) {
            ownerLink = <a href={`/account/${room.owner.bigscreenAccountId}`}>{room.owner.socialProfile.username}</a>;
        } else {
            ownerLink = <a href={`/account/${room.ownerBigscreenAccountId}`}>(owner)</a>;
        }

        return (
            <Table.Row>
                <Table.Cell collapsing>
                    {renderCompactTitle(room)}
                </Table.Cell>
                <Table.Cell collapsing>
                    <Label basic={participantsCount !== room.size} color={participantsCount === room.size ? "grey" : null}><Icon name='users' />&nbsp;{participantsCount}/{room.size}</Label>
                    {participantsCount === room.size && <Label color="grey">FULL</Label>}
                    {isNSFWRoom && <Label color="red"><Icon name='ban' />&nbsp;NSFW</Label>}
                    {!isNSFWRoom && <Label basic color="green">{room.category}</Label>}
                    <Label color="blue" basic>{room.environmentId}</Label>
                </Table.Cell>
                <Table.Cell collapsing>
                    {ownerLink}
                </Table.Cell>
                <Table.Cell collapsing>
                    {this.props.onUpdateRoom && <Form.Select size="tiny" name="category" value={room.category} options={constants.RoomCategories} onChange={this.props.onUpdateRoom.bind(this, roomIndex)} />}
                </Table.Cell>
                <Table.Cell collapsing>
                    {fromNow}
                </Table.Cell>
            </Table.Row>
        )
    }

    renderCompactRoomInfo2(room, roomIndex, environmentOptions) {
        const name = room.storedRoomSnapshot.name;
        const isNSFWRoom = room.storedRoomSnapshot.category === "NSFW";
        const description = _.trim(room.storedRoomSnapshot.description).length > 0 ? "\"" + room.storedRoomSnapshot.description + "\"" : `(No description)`;
        const participantsCount = (room.participantsIndex ? Object.keys(room.participantsIndex).length : 0);
        const size = room.storedRoomSnapshot.maxUsersPerInstance;
        const fromNow = formatDistanceToNow(new Date(room.createdAt), { addSuffix: true });
        const category = room.storedRoomSnapshot.category;
    
        let ownerLink = null;
        if (room.ownerSocialProfile) {
            ownerLink = <a href={`/account/${room.ownerSocialProfile.bigscreenAccountId}`}>{room.ownerSocialProfile.username}</a>;
        } else {
            ownerLink = <a href={`/account/${room.ownerBigscreenAccountId}`}>(owner)</a>;
        }
        
        let environmentName = room.storedRoomSnapshot.environmentId;
        if (this.props.environmentOptions) {
            const environmentOption = this.props.environmentOptions.find((environmentOption) => environmentOption.key === room.environmentId);
            if (environmentOption) {
                environmentName = environmentOption.text;
            }
        } 
    
        const environmentLink = (
            <a style={{textDecoration: "underline" }} href={`/rooms/environments/${room.environmentId}`}>{environmentName}</a>
        )
    
        return (
            <Table.Row>
                <Table.Cell collapsing style={{ padding: '4px', textAlign: 'center' }}>{roomIndex + 1}</Table.Cell>
                <Table.Cell collapsing>
                    {renderCompactTitle(room.storedRoomSnapshot, room, this.props.extra)}
                </Table.Cell>
                <Table.Cell collapsing>
                    <Label basic={participantsCount !== size} color={participantsCount === size ? "grey" : null}><Icon name='users' />&nbsp;{participantsCount}/{size}</Label>
                    {participantsCount === size && <Label color="grey">FULL</Label>}
                    {isNSFWRoom && <Label color="red"><Icon name='ban' />&nbsp;NSFW</Label>}
                    {!isNSFWRoom && <Label basic color="green">{category}</Label>}
                </Table.Cell>
                <Table.Cell collapsing>
                    {environmentLink}
                </Table.Cell>
                <Table.Cell collapsing>
                    {ownerLink}
                </Table.Cell>
                <Table.Cell collapsing>
                    {this.props.onUpdateRoom && <Form.Select size="tiny" name="category" value={category} options={constants.RoomCategories} onChange={this.props.onUpdateRoom.bind(this, roomIndex)} />}
                </Table.Cell>
                <Table.Cell collapsing>
                    {fromNow}
                </Table.Cell>
            </Table.Row>
        )
    }

    render() {
        return (
            <Table size="small" celled>
                <Table.Header fullWidth>
                    <Table.Row widths="equal">
                        <Table.HeaderCell collapsing style={{ padding: '4px', textAlign: 'center' }}></Table.HeaderCell>
                        <Table.HeaderCell collapsing>Name</Table.HeaderCell>
                        <Table.HeaderCell collapsing>Info</Table.HeaderCell>
                        <Table.HeaderCell collapsing>Environment</Table.HeaderCell>
                        <Table.HeaderCell collapsing>Owner</Table.HeaderCell>
                        <Table.HeaderCell collapsing>Category</Table.HeaderCell>
                        <Table.HeaderCell collapsing>Created</Table.HeaderCell>
                    </Table.Row>
                </Table.Header>

                <Table.Body>
                    {this.props.rooms.map((room, roomIndex) => this.renderCompactRoomInfo2(room, roomIndex))}
                </Table.Body>
            </Table>
        );
    }
}