import React from 'react';

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

export default class AccountHeader extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        if (this.props.account) {
            let bannedInfo = this.props.account.status == "Banned" ? (
                <div>
                    <Segment inverted color="red">
                        This account has been banned
                    </Segment>
                    <Table compact celled definition>
                        <Table.Body>
                            <Table.Row>
                                <Table.HeaderCell width={4}>Reason for ban</Table.HeaderCell>
                                <Table.Cell>
                                    {this.props.account.banHistory[0].message}
                                </Table.Cell>
                            </Table.Row>
                        </Table.Body>
                    </Table>
                </div>
            ) : null;

            let accountStatus = this.props.account.status == "Banned" ? (
                <div>
                    <Label color="red">Banned</Label>
                </div>
            ) : (
                <Label color="green">Active</Label>
            )

            let avatarUrl = "/images/avatar_b.jpg";
            if (this.props.account.oculusProfile && this.props.account.oculusProfile.oculusImageURL) {
                avatarUrl = this.props.account.oculusProfile.oculusImageURL;
            } else if (this.props.account.steamProfile && this.props.account.steamProfile.avatarfull) {
                avatarUrl = this.props.account.steamProfile.avatarfull;
            }

            // currentRoomId will be set if the user is in a room, but it will be "hidden" if the room is not public.
            // We're still sticking with the plan of hiding private rooms.
            let roomLink = null;
            if (this.props.connections && this.props.connections.length > 0 && this.props.connections[0].currentRoomId) {
                if (this.props.connections[0].currentRoomId === "hidden") {
                    roomLink = (
                        <Label color="grey">In a Private Room</Label>
                    )
                } else {
                    roomLink = (
                        <Label color="blue" as="a" href={`/room/${this.props.connections[0].currentRoomId}`}><Icon name='right arrow' size="small" />In a Public Room</Label>
                    )
                }
            }

            return (
                <div>
                    <Segment basic>
                        <Header as='h4' image>
                            <Image src={avatarUrl} rounded size='small' />
                            <Header.Content>
                            {this.props.account.username}
                            {(this.props.connections && this.props.connections.length > 0) && <Label color="green">Online Now</Label>}
                            {roomLink}
                            </Header.Content>
                        </Header>
                    </Segment>

                    {this.props.account.accessPolicies.includes("Admin") && <Segment inverted color="blue">
                        This is a Bigscreen Admin Account 👑
                    </Segment>}

                    {this.props.account.accessPolicies.includes("Moderator") && <Segment inverted color="purple">
                        This is a Bigscreen Moderator Account ✅
                    </Segment>}

                    {this.props.account.accessPolicies.includes("Fabricator") && <Segment inverted color="cyan">
                        This is a Bigscreen Fabricator Account 🛠
                    </Segment>}

                    {bannedInfo}
                </div>
            );
        }
    }
}