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

import {
    Header,
    Icon,
    Button,
    Table,
    Form,
    Label,
    Modal,
    Message } from 'semantic-ui-react'

import * as AccountUtils from "../AccountUtils";
import ApiButtonModal from '../../CloudApi/ApiButtonModal.jsx';

export default class AccountAccessPolicyManager extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedAccessPolicy: ""
        };
    }

    async componentDidMount() {
        console.log(this.props.accessPolicies);
        try {
            let schemas = await AccountUtils.getSchemas();
            this.setState({schemas});
        } catch (e) {
            console.error(e);
        }
    }

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

    async onAddAccessPolicy() {
        try {
            const result = await superagent.put(`/api/admin/account/${this.props.accountId}/access_policy/${this.state.selectedAccessPolicy}`).accept('json').send();
            console.log(result.body);
            if (this.props.onUpdate) {
                await this.props.onUpdate();
            }
            this.setState({ selectedAccessPolicy: "" });
        } catch (e) {
            console.log(e);
        }
    }

    async onRemoveAccessPolicy(accessPolicy) {
        try {
            const result = await superagent.delete(`/api/admin/account/${this.props.accountId}/access_policy/${accessPolicy}`).accept('json').send();
            console.log(result.body);
            if (this.props.onUpdate) {
                await this.props.onUpdate();
            }
        } catch (e) {
            console.log(e);
        }
    }

    render() {
        if (this.props.accessPolicies && this.state.schemas) {
            const isSuperUser = this.props.accessPolicies.includes('SuperUser');

            return (
                <div>
                    <Header as="h2">Access Policies</Header>
                    {isSuperUser && (
                        <Message info icon>
                            <Icon name="lock" />
                            <Message.Content>
                                <Message.Header>SuperUser Account</Message.Header>
                                Access policies for SuperUser accounts cannot be modified.
                            </Message.Content>
                        </Message>
                    )}
                    <Table celled striped compact>
                        <Table.Header>
                            <Table.Row>
                                <Table.HeaderCell>Access Policy</Table.HeaderCell>
                                {!isSuperUser && <Table.HeaderCell width={3} collapsing>Actions</Table.HeaderCell>}
                            </Table.Row>
                        </Table.Header>
                        <Table.Body>
                            {this.props.accessPolicies.map(accessPolicy => {
                                return (
                                    <Table.Row key={accessPolicy}>
                                        <Table.Cell>
                                            <Label color="purple">{accessPolicy}</Label>
                                        </Table.Cell>
                                        {!isSuperUser && (
                                            <Table.Cell collapsing>
                                                <ApiButtonModal
                                                    color="red"
                                                    size="small"
                                                    icon="trash"
                                                    text="Remove"
                                                    modalIcon="user cancel"
                                                    modalButtonText="Yes, remove this access policy"
                                                    onConfirm={() => this.onRemoveAccessPolicy(accessPolicy)}>
                                                    Are you sure you want to remove the <strong>{accessPolicy}</strong> access policy from this account?
                                                    <br /><br />
                                                    <Message warning icon>
                                                        <Icon name="warning" />
                                                        <Message.Content>
                                                            <Message.Header>Warning</Message.Header>
                                                            Only super users and admins can modify access policies!
                                                        </Message.Content>
                                                    </Message>
                                                </ApiButtonModal>
                                            </Table.Cell>
                                        )}
                                    </Table.Row>
                                )
                            })}
                            {!isSuperUser && (
                                <Table.Row>
                                    <Table.Cell colSpan={2}>
                                        <ApiButtonModal
                                            color="green"
                                            size="small"
                                            icon="plus"
                                            text="Add new access policy"
                                            modalIcon="user"
                                            modalButtonText="Yes, add this access policy"
                                            onConfirm={this.onAddAccessPolicy.bind(this)}>
                                            <p>Select an access policy to assign to the account</p>
                                            <p><strong>Note:</strong> only super users and admins can modify access policies!</p>
                                            <Form.Group>
                                                <Form.Select
                                                    required
                                                    fluid
                                                    label='Access Policy'
                                                    name="selectedAccessPolicy"
                                                    options={this.state.schemas.accessPolicies}
                                                    onChange={this.onChange.bind(this)}
                                                />
                                            </Form.Group>
                                        </ApiButtonModal>
                                    </Table.Cell>
                                </Table.Row>
                            )}
                        </Table.Body>
                    </Table>
                </div>
            );
        } else {
            return null;
        }
    }
}