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

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

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

export default class SocialBlockList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            blocked: [],
            pendingGraphItemId: null,
            showDialog: false
        };
    }

    async componentDidMount() {
        return this.reload();
    }

    async reload() {
        this.setState({ loading: true });
        try {
            this.setState({ blockeds: [] });
            const res = await superagent.get(`/cloud/admin/account/${this.props.account.id}/social/graph/blocked`).accept('json');
            console.log(res.body);
            this.setState({ blockeds: res.body.items });
        } catch (e) {
            console.log(e);
        }
        this.setState({ loading: false });
    }

    onShowDialog(pendingGraphItemId, e) {
        e.preventDefault();
        this.setState({showDialog: true, pendingGraphItemId });
    }

    closeDialog(e) {
        this.setState({showDialog: false, pendingGraphItemId: null });
    }

    async onConfirmDeleteBlockEntry(e) {
        e.preventDefault();

        try {
            const result = await superagent.delete(`/cloud/admin/social/graph/${this.state.pendingGraphItemId}`).accept('json');
            this.setState({ showDialog: false, pendingGraphItemId: null });
            await this.reload();
        } catch (e) {
            this.setState({ showDialog: false, pendingGraphItemId: null });
            console.log(e);
        }
    }

    render() {
        if (this.state.loading) {
            return <Segment basic loading={this.state.loading}>&nbsp;</Segment>
        }

        if (this.state.blockeds) {
            const blockeds = _.orderBy(this.state.blockeds, ["createdAt"], ["desc"]);
            return (
                <div>
                    <Modal dimmer="inverted" closeOnEscape={true} closeOnDimmerClick={true} closeIcon
                        onClose={this.closeDialog.bind(this)}
                        open={this.state.showDialog}>
                        <Header icon='user' content='Delete a Block Entry' />
                        <Modal.Content>
                            <p>Are you sure you want to do this?</p>
                            <Message color="red">
                                <Message.Header>THIS IS A SERIOUS ACTION. This will allow the user to be able to see the target account again.</Message.Header>
                                <Message.Content>
                                    The block deletion will be noted on the Bigscreen Discord server.
                                    <br /><br />
                                    Only confirm if you are 100% sure the block entry was created in error, and you have confirmation from the account who created the block.
                                </Message.Content>
                            </Message>
                        </Modal.Content>
                        <Modal.Actions>
                            <Button color='red' active={this.props.account.status == "Banned"} onClick={this.onConfirmDeleteBlockEntry.bind(this)}>
                                <Icon name='checkmark' />Yes, delete the block entry
                            </Button>
                        </Modal.Actions>
                    </Modal>
                    <Table celled striped compact>
                        <Table.Header>
                            <Table.Row>
                                <Table.HeaderCell width={1} collapsing>Date</Table.HeaderCell>
                                <Table.HeaderCell width={2} collapsing>Target Account</Table.HeaderCell>
                                <Table.HeaderCell width={2} collapsing>Admin</Table.HeaderCell>
                            </Table.Row>
                        </Table.Header>
                        <Table.Body>
                            {blockeds.map(blocked => {
                                return (
                                    <Table.Row>
                                        <Table.Cell width={3} collapsing>
                                            {formatInTimeZone(fromUnixTime(blocked.createdAt / 1000), DEFAULT_TIMEZONE, 'yyyy-MM-dd HH:mm:ss zzz')}
                                        </Table.Cell>
                                        <Table.Cell width={2}>
                                            <a href={`/account/${blocked.targetBigscreenAccountId}`}>{blocked.targetSocialProfileSnapshot.username}</a>
                                        </Table.Cell>
                                        <Table.Cell width={2}>
                                            <Button color="black" onClick={this.onShowDialog.bind(this, blocked.id)}><Icon name='trash' size="small" />Delete Block</Button>
                                        </Table.Cell>
                                    </Table.Row>
                                )
                            })}
                        </Table.Body>
                    </Table>
                </div>
            );
        } else {
            return null;
        }
    }
}