import * as React from 'react';
import {
    DocumentCard,
} from 'office-ui-fabric-react/lib/DocumentCard';
import { DefaultButton, PrimaryButton, TextField, IconButton, SearchBox } from 'office-ui-fabric-react/lib';
import { Modal } from 'office-ui-fabric-react/lib/Modal';
import { EntityService } from "../../../../Services"
import './WorkSpace.css'
import { Link } from 'office-ui-fabric-react/lib/Link';
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 searchBox">
                   <div className="ms-lg6" style={{float:'left'}}>
                    <SearchBox
                        placeholder="Search"
                        onSearch={newValue => console.log('value is ' + newValue)}
                        onFocus={() => console.log('onFocus called')}
                        onBlur={() => console.log('onBlur called')}
                        onChange={() => console.log('onChange called')}
                    />
                    </div>
                    <div style={{float: 'right' }}>
                        <DefaultButton
                            primary={true}
                            data-automation-id="test"
                            text="Add Workspace"
                            onClick={this._showModal}
                            allowDisabledFocus={true}
                            iconProps={{ iconName: 'Add' }}
                        />
                    </div>
                </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' },
                                                                onClick: this.editWorkpace.bind(this)

                                                            },
                                                            {
                                                                key: 'Remove',
                                                                text: 'Remove',
                                                                iconProps: { iconName: 'Remove' },
                                                                onClick: this.deleteWorkpace.bind(this, item.id)
                                                            }
                                                        ]
                                                    }}
                                                />
                                            </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> <Modal
                    isOpen={this.state.showModal}
                    onDismiss={this._closeModal}
                    isBlocking={false}
                    containerClassName="ms-modalExample-container">

                    <div className="ms-modalExample-header">
                        <span>Create new workspace</span>
                    </div>
                    <div className="ms-modalExample-body">
                        <p>Please enter workspace title, once you click create you can proceed to add entity to your new workspace</p>
                        <div style={{ margin: 20 }} >
                            <TextField placeholder="enter workspace title." ariaLabel="Please enter text here" value={this.state.selectedItem.displayName} onChanged={this._handleLabelChange.bind(this)} />
                        </div>

                    </div>

                    <div className="ms-modalExample-footer modalFooter" >
                        <PrimaryButton style={{ marginRight: '8px' }} onClick={(e) => this._addWorkspace(this.state.selectedItem)}>
                            Save
                                     </PrimaryButton>
                        <DefaultButton onClick={this._closeModal}>Cancel</DefaultButton>
                    </div>
                </Modal>
            </div>
        );
    }
    _handleLabelChange(value: any) {
        this.state.selectedItem.displayName = value;
    };

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

        });
    };
    private editWorkpace() {
    }

    private deleteWorkpace(id: any) {
        if (id) {

            this._entityService.deleteWorkspace(id)
                .then(result => {
                    this._entityService.listWorkspaces().then(result => { this.setState({ items: result }) });
                    alert("Deleted successfully");
                }, error => {
                    alert(error.text());
                });
        }
    }

    private _showModal = (): void => {
        this.setState({ showModal: true });
    };

    private _closeModal = (): void => {
        this.setState({ showModal: false });
    };
}