import React from 'react';
import { fromUnixTime, format } from "date-fns";

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

class RoomReport extends React.Component {
    constructor(props) {
        super(props);
    }

    async componentDidMount() {
    }

    render() {
        if (!this.props.report) {
            return <div />;
        }
        
        let reporterAccount = (<div />);
        let roomCreatorAccount = (<div />);

        let reporterAccountLink = (
            <div>Account missing!</div>
        );

        if (this.props.report.reporterAccount) {
            reporterAccountLink = (
                <a href={`/account/${this.props.report.reporterAccount.id}`}>{this.props.report.reporterAccount.username}</a>
            );
        }
        
        if (this.props.report.roomCreatorAccount) {
            roomCreatorAccount = (
                <Table.Row>
                    <Table.HeaderCell>Room Creator Account</Table.HeaderCell>
                    <Table.Cell>
                        <Header as='h4' image>
                            <Image src='/images/avatar_b.jpg' rounded size='mini' />
                            <Header.Content>
                                <Header.Subheader><a href={`/account/${this.props.report.roomCreatorAccount.id}`}>{this.props.report.roomCreatorAccount.username}</a></Header.Subheader>
                            </Header.Content>
                        </Header>
                    </Table.Cell>
                </Table.Row>
            )
        }

        const roomSnapshot = this.props.report.roomSnapshot;

        const roomTitle = (
            <span>
                <strong><a style={{ textDecoration: "underline" }} href={`/room/${roomSnapshot.roomId}`}>{roomSnapshot.name}</a></strong>&nbsp;
                <Label basic={roomSnapshot.participants !== roomSnapshot.size} color={roomSnapshot.participants === roomSnapshot.size ? "grey" : null}><Icon name='users' />&nbsp;{roomSnapshot.participants}/{roomSnapshot.size}</Label>
                {false && ((roomSnapshot.visibility === 'private') && <Label color="black">Private</Label>)}
                {false && ((roomSnapshot.participants > 0) ? <Label color="red"><Icon name="sun" loading />Live</Label> : <Label color="grey">Offline</Label>)}
            </span>
        );

        return (
            <Segment>
                <Header as='h3' image>
                    <Header.Content>
                        {format(fromUnixTime(this.props.report.createdAt._seconds), "PPPpp")}
                        <Header.Subheader>Room "{this.props.report.roomName}" was reported by {reporterAccountLink}</Header.Subheader>
                    </Header.Content>
                </Header>

                <Table padded compact celled definition>
                    <Table.Body>
                        <Table.Row>
                            <Table.HeaderCell width={2}>Reason</Table.HeaderCell>
                            <Table.Cell>{this.props.report.reason}</Table.Cell>
                        </Table.Row>
                        <Table.Row>
                            <Table.HeaderCell width={2}>Room</Table.HeaderCell>
                            <Table.Cell>
                                {roomTitle}
                            </Table.Cell>
                        </Table.Row>
                        <Table.Row>
                            <Table.HeaderCell width={2}>Reporter</Table.HeaderCell>
                            <Table.Cell>{reporterAccountLink}</Table.Cell>
                        </Table.Row>
                    </Table.Body>
                </Table>
                <Table padded compact celled definition>
                    <Table.Body>
                        {roomCreatorAccount}
                        <Table.Row>
                            <Table.HeaderCell width={2}>Room Name</Table.HeaderCell>
                            <Table.Cell>{roomSnapshot.name}</Table.Cell>  
                        </Table.Row>
                        <Table.Row>
                            <Table.HeaderCell width={2}>Room Description</Table.HeaderCell>
                            <Table.Cell>{roomSnapshot.description}</Table.Cell>
                        </Table.Row>
                        <Table.Row>
                            <Table.HeaderCell width={2}>Room Category</Table.HeaderCell>
                            <Table.Cell>{roomSnapshot.category}</Table.Cell>  
                        </Table.Row>
                    </Table.Body>
                </Table>
            </Segment>
        )
    }
}

export default RoomReport;