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

import { fromUnixTime } from "date-fns";
import { formatInTimeZone } from 'date-fns-tz'

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

export default class SocialUserHistory extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            userHistory: [],
        };
    }

    async componentDidMount() {
        this.setState({ loading: true });
        try {
            this.setState({ userHistory: [] });
            const res = await superagent.get(`/cloud/admin/account/${this.props.account.id}/social/history/user`).accept('json');
            const historyItems = res.body.items;
            const userHistory = _.orderBy(historyItems, ["createdAt"], ["desc"]);
            this.setState({ userHistory });
        } catch (e) {
            console.log(e);
        }
        this.setState({ loading: false });
    }

    render() {
        if (this.state.loading) {
            return <Segment basic loading={this.state.loading}>&nbsp;</Segment>
        }
        
        if (this.state.userHistory) {
            return (
                <Table celled striped compact>
                    <Table.Header>
                        <Table.Row>
                            <Table.HeaderCell width={1} collapsing>Date</Table.HeaderCell>
                            <Table.HeaderCell width={2} collapsing>User Profile</Table.HeaderCell>
                            <Table.HeaderCell width={2} collapsing>Room</Table.HeaderCell>
                        </Table.Row>
                    </Table.Header>
                    <Table.Body>
                        {this.state.userHistory.map(historyItem => {
                            console.log(historyItem);
                            return (
                                <Table.Row>
                                    <Table.Cell width={1} collapsing>
                                        {formatInTimeZone(fromUnixTime(historyItem.createdAt / 1000), DEFAULT_TIMEZONE, 'yyyy-MM-dd HH:mm:ss zzz')}
                                    </Table.Cell>
                                    <Table.Cell width={2}>
                                        <a href={`/account/${historyItem.socialProfileSnapshot.id}`}>{historyItem.socialProfileSnapshot.username}</a>
                                    </Table.Cell>
                                    <Table.Cell width={2}>
                                        {historyItem.roomData ? <a href={`/room/${historyItem.roomData.roomId}`}>{historyItem.roomData.name}</a> : ""}
                                        {historyItem.room ? <a href={`/room/${historyItem.room.roomId}`}>{historyItem.room.name}</a> : ""}
                                    </Table.Cell>
                                </Table.Row>
                            )
                        })}
                    </Table.Body>
                </Table>
            );
        } else {
            return null;
        }
    }
}