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

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

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

    async componentDidMount() {
    }

    render() {
        if (this.props.account.adminNotes == null || this.props.account.adminNotes.length == 0) {
            return (
                <div />
            )
        }

        const adminNotes = _.orderBy(this.props.account.adminNotes.notes, ["createdAt.value"], ["desc"]);

        return (
            <Table celled striped compact>
                <Table.Header>
                    <Table.Row>
                        <Table.HeaderCell width={3} collapsing>Date</Table.HeaderCell>
                        <Table.HeaderCell width={2} collapsing>Note</Table.HeaderCell>
                        <Table.HeaderCell width={2} collapsing>Created By</Table.HeaderCell>
                    </Table.Row>
                </Table.Header>
                <Table.Body>
                    {adminNotes.map(note => {
                        return (
                        <Table.Row>
                            <Table.Cell width={3} collapsing>
                                {(note.createdAt) ? formatInTimeZone(new Date(note.createdAt.value), DEFAULT_TIMEZONE, 'PPPp z') : "Error"}
                            </Table.Cell>
                            <Table.Cell width={2}>
                                {note.text}
                            </Table.Cell>
                            <Table.Cell width={2}>
                                <a href={`/account/${note.authorBigscreenAccountId}`}>{note.authorUsername}</a>
                            </Table.Cell>
                        </Table.Row>
                        )
                    })}

                </Table.Body>
            </Table>
        );
    }
}