import * as React from 'react';
import {
    DocumentCard,
} from 'office-ui-fabric-react/lib/DocumentCard';
import 'office-ui-fabric-react/lib/components/Modal/examples/Modal.Basic.Example.scss';
import { EntityService } from "../../../../Services"
import './WorkSpace.css'
import { Link } from 'office-ui-fabric-react/lib/components/Link/Link';
import { IconButton } from 'office-ui-fabric-react/lib/components/Button/IconButton/IconButton';

export class Workspace extends React.Component<any, any> {
    private _entityService: EntityService = new EntityService();

    constructor(props: any) {
        super(props);
        this.state = {
            items: new Array<Workspace>(),
            selectedItem: { displayName: '' }

        };
        this.loadWorkspaces();
    }

    private loadWorkspaces() {
        this._entityService.listWorkspaces().then(result => { this.setState({ items: result }) });
    }

    public render(): JSX.Element {
        return (
            <div className="pagecontent">
                <div className="ms-Grid-row">
                    <h3>Workspace</h3>
                </div>
                
                <div className="ms-Grid-row">
                {
                    
                    this.state.items.map((item: any) => {
                        return <div key={item.id} className="card">
                            <div>
                                <DocumentCard>
                                    <div className="ms-Grid">
                                        <div className="ms-Grid-row cardHeader">
                                            <div className="ms-Grid-col ms-lg10 ">
                                                <h4 >{item.displayName}</h4></div>
                                            <div className="ms-Grid-col ms-lg2 controlsPanel">
                                                <IconButton
                                                    menuProps={{
                                                        items: [
                                                            {
                                                                key: 'Edit',
                                                                text: 'Edit',
                                                                iconProps: { iconName: 'Edit' },

                                                            },
                                                            {
                                                                key: 'Remove',
                                                                text: 'Remove',
                                                                iconProps: { iconName: 'Remove' },
                                                            }
                                                        ]
                                                    }}
                                                />
                                            </div>
                                        </div>
                                        <div className="cardContent">
                                            <div>
                                                <i className="ms-Icon ms-Icon--View cardControls" aria-hidden="true"></i><Link href={"/entitylist/" + item.id} className="controlsText">View entities</Link>
                                            </div>
                                            {/* <div>
                                                <i className="ms-Icon ms-Icon--Add cardControls" aria-hidden="true"></i><Link href={"/entitylist/" + item.id} className="controlsText">Create entities</Link>
                                            </div> */}
                                            <div>
                                                <i className="ms-Icon ms-Icon--SecurityGroup cardControls" aria-hidden="true"></i><Link href={"/entitylist/" + item.id} className="controlsText">Manage Permissions</Link>
                                            </div>
                                        </div>

                                    </div>
                                </DocumentCard>
                            </div>

                        </div>

                    })}
               </div> 
            </div>
        );
    }
    _handleLabelChange(value: any) {
        this.state.selectedItem.displayName = value;
    };

    _addWorkspace = (item: any) => {
        this._entityService.saveWorkspace(item).then(result => {
            this.loadWorkspaces();
            this.setState({ showModal: false });
        });
    };


}
