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";

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

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

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

    onAccessPolicyModal(e) {
        e.preventDefault();
        this.setState({showAccessPolicyModal: true, selectedAccessPolicy: ""});
    }

    closeAccessPolicyModal(e) {
        this.setState({showAccessPolicyModal: false});
    }

    async onAddAccessPolicy(e) {
        e.preventDefault();
        this.setState({loading: true});
        try {
            const result = await superagent.put(`/api/admin/account/${this.props.account.id.accountId}/disable`).accept('json');
            console.log(result.body);
            await this.getAccountInfo();
        } catch (e) {
            console.log(e);
        }
        this.setState({showAccessPolicyModal: false});
    }

    render() {
        if (this.props.account && this.state.schemas) {
            return (
                <div>
                    <Modal dimmer="inverted" closeOnEscape={true} closeOnDimmerClick={true} closeIcon
                        onClose={this.closeAccessPolicyModal.bind(this)}
                        open={this.state.showAccessPolicyModal}>
                        <Header icon='user' content='Add an access policy' />
                        <Modal.Content>{
                            <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="accessPolicy"
                                options={this.state.schemas.accessPolicies}
                                onChange={this.onChange.bind(this)}
                            />
                        </Form.Group>

                        </Modal.Content>
                        <Modal.Actions>
                            <Button color='green' disabled={this.state.accessPolicy == ""} onClick={this.onAddAccessPolicy.bind(this)}>
                                <Icon name='checkmark' />Yes, add this access policy.
                            </Button>
                        </Modal.Actions>
                    </Modal>

                    <div>
                        <Header as="h2">Access Policies</Header>
                        <Button color="black" onClick={this.onAccessPolicyModal.bind(this)}><Icon name='recycle' size="small" />Add an access policy</Button>
                        <Table celled striped compact>
                            <Table.Header>
                                <Table.Row>
                                    <Table.HeaderCell width={3} collapsing>Policy</Table.HeaderCell>
                                </Table.Row>
                            </Table.Header>
                            <Table.Body>
                                {this.props.account.accessPolicies.map(accessPolicy => {
                                    return (
                                    <Table.Row>
                                        <Table.Cell width={3} collapsing>
                                            <Label color="purple">{accessPolicy}</Label>
                                        </Table.Cell>
                                    </Table.Row>
                                    )
                                })}
                            </Table.Body>
                        </Table>
                    </div>
                </div>
            );
        } else {
            return null;
        }
    }
}