import React from 'react';
import superagent from 'superagent';

import {
    Segment,
    Header,
    Image,
    Icon,
    Button,
    Table,
    Form,
    Label } from 'semantic-ui-react'

// Shows a list of screens in the room, as well as controls to:
// 1. Create and delete screens.
// 2. Add or content on to the screens.
// 3. Alter screen pose states.
export default class Screens extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        };
    }

    async componentDidMount() {
    }

    // TODO: add a screen

    // TODO: remove a screen

    // TODO: update a screen


    render() {
        if (!this.props.room) {
            return (
                <div />
            )
        }

        const anchor = `${this.props.room.roomType}${this.props.roomIndex}`;
        const roomTitle = <Header as="h4">{this.props.room.name} #{this.props.roomIndex + 1} (Participants: {this.props.room.participants.length})</Header>

        return (
            <Segment>
                {(this.props.room.screens && this.props.room.screens.length > 0) &&
                    <Table compact celled padded>
                        <Table.Header>
                            <Table.Row>
                                <Table.HeaderCell width={3}>Name</Table.HeaderCell>
                                <Table.HeaderCell width={2}>Type</Table.HeaderCell>
                                <Table.HeaderCell width={2}>Playlist</Table.HeaderCell>
                                <Table.HeaderCell>Tools</Table.HeaderCell>
                            </Table.Row>
                        </Table.Header>
                        <Table.Body>
                            {this.props.room.participants.map((participant, participantIndex) => {
                                const isAdmin = _.indexOf(this.props.room.adminUserIds, participant.userId);
                                const isOwner = participant.userSessionId === this.props.room.owner.userSessionId;

                                let avatarUrl = "/images/avatar_b.jpg";
                                const bigscreenUser = participant.bigscreenUser;
                                const accountProfile = participant.accountProfile;
                                if (accountProfile && accountProfile.oculusProfile && accountProfile.oculusProfile.oculusImageURL) {
                                    avatarUrl = accountProfile.oculusProfile.oculusImageURL;
                                } else if (accountProfile && accountProfile.steamProfile && accountProfile.steamProfile.avatarfull) {
                                    avatarUrl = accountProfile.steamProfile.avatarfull;
                                }

                                let bigscreenUserHeader = null;
                                if (accountProfile) {
                                    bigscreenUserHeader = (bigscreenUser.bigscreenAccountId) ? (
                                        <Header as='h4' image>
                                            <Image src={avatarUrl} rounded size='small' />
                                            <Header.Content>
                                            <a href={`/account/${bigscreenUser.bigscreenAccountId}`}>{accountProfile.username}</a>
                                            </Header.Content>
                                        </Header>
                                    ) : ( 
                                        <div>
                                            <a href={`/account/${bigscreenUser.bigscreenAccountId}`}>{accountProfile.username}</a>
                                            <Label color="yellow">Ghost user! 👻</Label>
                                        </div>
                                    );
                                } else {
                                    bigscreenUserHeader = ( 
                                        <div>
                                            Missing User Data!!!!
                                            <Label color="yellow">Ghost user! 👻</Label>
                                        </div>
                                    );
                                }

                                const isDevelopment = (window && (window.location.hostname.indexOf("localhost") !== -1
                                    || window.location.hostname.indexOf("development") !== -1
                                    || window.location.hostname.indexOf("dev-stable") !== -1));
                                const ghostUserTest = isDevelopment ? (
                                    <div>
                                        <Button color="red" onClick={this.onGhostify.bind(this, participant, participantIndex, this.props.room, this.props.roomIndex)}><Icon name='cancel' size="small" />Ghostify User</Button>
                                    </div>
                                ) : <div />

                                return (
                                <Table.Row>
                                    <Table.Cell width={3}>
                                        {bigscreenUserHeader}
                                    </Table.Cell>
                                    <Table.Cell width={2}>
                                        {isOwner ? <Label color="violet">Owner</Label> : ""}
                                        {isAdmin ? <Label color="blue">Admin</Label> : ""}
                                    </Table.Cell>
                                    <Table.Cell width={2}>
                                        <Label color="blue" basic>{bigscreenUser.systemInfo && (bigscreenUser.systemInfo.deviceName || bigscreenUser.systemInfo.HMD)}</Label>
                                    </Table.Cell>
                                    <Table.Cell width={2}>
                                        <Header as='h4'>
                                            <Header.Content>
                                            {bigscreenUser.systemInfo && bigscreenUser.systemInfo.GPU}
                                            <Header.Subheader>{bigscreenUser.systemInfo && bigscreenUser.systemInfo.CPU}</Header.Subheader>
                                            </Header.Content>
                                        </Header>
                                    </Table.Cell>
                                    <Table.Cell width={2}>
                                        {bigscreenUser.systemInfo && bigscreenUser.systemInfo.operatingSystem}
                                    </Table.Cell>
                                    <Table.Cell width={2}>
                                        {bigscreenUser.systemInfo && bigscreenUser.systemInfo.version}
                                    </Table.Cell>
                                    <Table.Cell>
                                        <Button color="orange" onClick={this.props.onEjectParticipant.bind(this, participant, participantIndex, this.props.room, this.props.roomIndex)}><Icon name='cancel' size="small" />Eject</Button>
                                        <Button color="orange" onClick={this.props.onKickParticipant.bind(this, participant, participantIndex, this.props.room, this.props.roomIndex)}><Icon name='user cancel' size="small" />Kick</Button>
                                    </Table.Cell>
                                </Table.Row>
                                )
                            })}
                        </Table.Body>
                    </Table>
                }
            </Segment>
        );
    }
}