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

import { DEFAULT_TIMEZONE } from '../../CloudApi/Constants.js';
import { Segment, Header, Image, Table } from 'semantic-ui-react'

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

    render() {
        if (!this.props.report) {
            return <div />;
        }
        
        let reporterAccount = (<div />);
        let targetAccount = (<div />);
        if (this.props.report.reporterAccount) {
            reporterAccount = (
                <Segment basic>
                    <Header as='h4' image>
                        <Image src='/images/avatar_b.jpg' rounded size='mini' />
                        <Header.Content>
                        Report #{this.props.reportIndex + 1}
                        <Header.Subheader>Reported by: <a href={`/account/${this.props.report.reporterAccount.id}`}>{this.props.report.reporterAccount.username}</a></Header.Subheader>
                        </Header.Content>
                    </Header>
                </Segment>
            )
        }
        
        if (this.props.report.targetAccount) {
            targetAccount = (
                <Table.Row>
                    <Table.HeaderCell width={4}>Reported 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.targetAccount.id}`}>{this.props.report.targetAccount.username}</a></Header.Subheader>
                            </Header.Content>
                        </Header>
                    </Table.Cell>
                </Table.Row>
            )
        }

        return (
            <div>
                {reporterAccount}
                <Table padded compact celled definition>
                    <Table.Body>
                        {targetAccount}
                        <Table.Row>
                            <Table.HeaderCell width={4}>Reason</Table.HeaderCell>
                            <Table.Cell>{this.props.report.reason}</Table.Cell>
                        </Table.Row>
                        <Table.Row>
                            <Table.HeaderCell>Room name</Table.HeaderCell>
                            <Table.Cell>{this.props.report.roomName}</Table.Cell>  
                        </Table.Row>
                        <Table.Row>
                            <Table.HeaderCell>Room description</Table.HeaderCell>
                            <Table.Cell>{this.props.report.roomDescription}</Table.Cell>
                        </Table.Row>
                        <Table.Row>
                            <Table.HeaderCell>Room Admin</Table.HeaderCell>
                            <Table.Cell>{this.props.report.roomAdminUsername}</Table.Cell>  
                        </Table.Row>
                        <Table.Row>
                            <Table.HeaderCell>Room Type</Table.HeaderCell>
                            <Table.Cell>{this.props.report.roomType}</Table.Cell>  
                        </Table.Row>
                        <Table.Row>
                            <Table.HeaderCell>Created At</Table.HeaderCell>
                            <Table.Cell>
                                {formatInTimeZone(fromUnixTime(this.props.report.createdAt._seconds), DEFAULT_TIMEZONE, 'PPPp z')}
                            </Table.Cell>  
                        </Table.Row>
                    </Table.Body>
                </Table>
            </div>
        )
    }
}

export default AccountReport;