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

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

import * as AccountUtils from "../AccountUtils";

const DISABLE_CHECK_TEXT = "Disable this account!"

export default class AccountDangerZone extends React.Component {
    constructor(props) {
        super(props);
        this.state = {           
            showDisableDialog: false,
            showDisconnectDialog: false,
            
            disableCheckText: "",
        };
    }

    async onChange(e, { name, value }) {
        this.setState({ [name]: value })
    }

    // Disconnect
    onDisconnect(e) {
        e.preventDefault();
        this.setState({showDisconnectDialog: true });
    }

    closeDisconnectModal(e) {
        this.setState({showDisconnectDialog: false});
    }

    async onConfirmDisconnect(e) {
        e.preventDefault();
        try {
            const result = await superagent.get(`/cloud/admin/account/${this.props.account.id}/disconnect`).accept('json');
        } catch (e) {
            console.log(e);
        }
        this.setState({showDisconnectDialog: false});
    }

    // Disable account dialog

    onDisable(e) {
        e.preventDefault();
        this.setState({showDisableDialog: true, disableCheckText: ""});
    }

    onUpdateDisableCheckText(event, {name, value}) {
        event.preventDefault();
        this.setState({disableCheckText: value});
    }

    closeDisableModal(e) {
        this.setState({showDisableDialog: false});
    }

    async onConfirmDisable(e) {
        e.preventDefault();
        if (this.state.disableCheckText === DISABLE_CHECK_TEXT) {
            try {
                const result = await superagent.put(`/api/admin/account/${this.props.account.id}/disable`).accept('json');
                console.log(result.body);
                await this.getAccountInfo();
            } catch (e) {
                console.log(e);
            }
        }
        this.setState({showDisableDialog: false});
    }

    async onAddAccessPolicy(e) {
        e.preventDefault();
        try {
        } catch (e) {
            console.log(e);
        }
    }

    render() {
        if (this.props.account) {
            let bannedInfo = this.props.account.status == "Banned" ? (
                <div>
                    <Segment inverted color="red">
                        This account has been banned
                    </Segment>
                </div>
            ) : null;

            let accountStatus = this.props.account.status == "Banned" ? (
                <div>
                    <Label color="red">Banned</Label>
                </div>
            ) : (
                <Label color="green">Active</Label>
            )

            return (
                <div>
                    <Modal dimmer="inverted" closeOnEscape={true} closeOnDimmerClick={true} closeIcon
                        onClose={this.closeDisconnectModal.bind(this)}
                        open={this.state.showDisconnectDialog}>
                        <Header icon='user cancel' content='Disconnect' />
                        <Modal.Content>{
                            (this.props.account) &&
                            <p>Disconnect {this.props.account.username}?<br /><br /><strong>Use wisely, but this has no permanent effect.</strong> The user will be inconvenienced for a few seconds while waiting for a reconnection attempt, though in some cases they will have to restart their app. This will have no effect if they are offline.</p>
                        }
                        </Modal.Content>
                        <Modal.Actions>
                            <Button color='blue' onClick={this.onConfirmDisconnect.bind(this)}><Icon name='checkmark' />Disconnect this account now!</Button>
                        </Modal.Actions>
                    </Modal>

                    <Modal dimmer="inverted" closeOnEscape={true} closeOnDimmerClick={true} closeIcon
                        onClose={this.closeDisableModal.bind(this)}
                        open={this.state.showDisableDialog}>
                        <Header icon='user' content='Disable Account' />
                        <Modal.Content>{
                            (this.props.account) &&
                            <p>Enter the text &quot;{DISABLE_CHECK_TEXT}&quot; to permanently disable {this.props.account.username}'s account:</p>
                        }
                        <p><strong>Note:</strong> this action can not be undone!</p>
                        <Form.Input fluid size="medium" autoComplete="off" name="disableCheckText" value={this.state.disableCheckText} onChange={this.onUpdateDisableCheckText.bind(this)} />
                        </Modal.Content>
                        <Modal.Actions>
                            <Button color='red' disabled={this.state.disableCheckText !== DISABLE_CHECK_TEXT} onClick={this.onConfirmDisable.bind(this)}>
                                <Icon name='checkmark' />Yes, disable this account.
                            </Button>
                        </Modal.Actions>
                    </Modal>

                    <div>
                        {this.props.account.isStaff && <Segment inverted color="blue">
                            This is a Bigscreen Staff Account
                        </Segment>}

                        {bannedInfo}

                        <Segment color="red">
                            <Header as="h2" color="red">Danger Zone</Header>
                            <Table compact celled definition>
                                <Table.Body>
                                    <Table.Row>
                                        <Table.HeaderCell width={4}>Disconnect Account</Table.HeaderCell>
                                        <Table.Cell>
                                            <Button color="blue" onClick={this.onDisconnect.bind(this)}><Icon name='user cancel' size="small" />Disconnect This Account</Button>
                                        </Table.Cell>
                                    </Table.Row>

                                    <Table.Row>
                                        <Table.HeaderCell width={4}>Disable Account</Table.HeaderCell>
                                        <Table.Cell>
                                            <Button color="black" onClick={this.onDisable.bind(this)}><Icon name='recycle' size="small" />Disable This Account</Button>
                                        </Table.Cell>
                                    </Table.Row>
                                </Table.Body>
                            </Table>
                        </Segment>
                    </div>
                </div>
            );
        } else {
            return null;
        }
    }
}