import * as React from 'react';
import { Breadcrumb } from 'office-ui-fabric-react/lib/components/Breadcrumb/Breadcrumb';
import { CommandsBar } from 'src/Controls/CommandsBar';
import { ListView } from '../../../../Controls';
import { Command, User } from '../../../../Models';
import { Panel } from 'office-ui-fabric-react/lib/components/Panel/Panel';
import { PanelType } from 'office-ui-fabric-react/lib/components/Panel/Panel.types';
import { PrimaryButton } from 'office-ui-fabric-react/lib/components/Button/PrimaryButton/PrimaryButton';
import { DefaultButton } from 'office-ui-fabric-react/lib/components/Button/DefaultButton/DefaultButton';
import { IColumn } from 'office-ui-fabric-react/lib/components/DetailsList/DetailsList.types';
let _items: User[] = [];

export interface IData {
    columns: IColumn[];
    items: User[];
}
export class GroupList extends React.Component<any, any> {

    constructor(props: any) {
        super(props);
        this.state = {
            showPanel: false,
            commands: new Array<Command>(),
            items: _items,
            columns: new Array<IColumn>(),
        };
        this.loadGroups();
        this.loadColumns();
    }
    private loadColumns() {
        this.state.columns.push({
            dataType: 'string',
            name: 'Group Name',
            fieldName: 'displayName',
            minWidth:250,
            maxWidth:350
        });
        this.state.columns.push({
            dataType: 'string',
            name: 'Email',
            fieldName: 'Email',
            minWidth:250,
            maxWidth:350
        });
       
    }
    private loadGroups() {
        this.setState({ commands: this.getCommonCommands() });

    }
    private getCommonCommands(): Command[] {
        let commands = new Array<Command>();
        commands.push(
            {
                key: "addGroup",
                name: "Create Group",
                icon: "Add",
                onClick: this.addUser.bind(this)

            });
        return commands;
    }
    private getGroupCommands(): Command[] {
        let commands = this.getCommonCommands();
        commands.push(
            {
                key: "removeGroup",
                name: "Remove",
                icon: "Remove",
                onClick: this.deleteGroup.bind(this)
            },
            {
                key: "edit",
                name: "Edit",
                icon: "Edit",
                onClick: this.editGroup.bind(this)
            });

        return commands;
    }
    private selectedUserChanged(entity: User) {
        if (!entity)
            return;


        this.setState({ commands: this.getGroupCommands() });
    }
    public render(): JSX.Element {
        return (
            <div>
                <div className="ms-Grid-row breadcrumb-Border">
                    <div className="ms-Grid-col ms-lg12">
                        <div className="breadcrumb">
                            <Breadcrumb
                                items={[
                                    { text: 'Users', key: 'Users', href: "/Users" },

                                ]}
                                ariaLabel={'Website breadcrumb'}
                            />
                        </div>
                    </div>
                </div>

                <div className="ms-Grid-row" >
                    <div>
                        <CommandsBar Commands={this.state.commands} />
                    </div>
                    <div className="ms-Grid-col ms-lg12" >
                        <ListView
                            selectionModeType={true}
                            Items={this.state.items}
                            SelectedItemChanged={this.selectedUserChanged.bind(this)}
                            Columns={this.state.columns} />
                    </div>
                </div>


                 <Panel
                    className="panelStyle"
                    isOpen={this.state.showPanel}
                    onDismissed={this.closePanel.bind(this)}
                    type={PanelType.medium}
                    onRenderFooterContent={this.renderPanelFooterContent.bind(this)}
                    onRenderBody={this.renderPanelBody.bind(this)}
                    headerText="Record Details"
                    headerClassName="panelHeaderStyle"
                    hasCloseButton={false}
                >
                
                </Panel>

            </div>
        );
    }
    private renderPanelBody = (): JSX.Element => {
        return (
            <div style={{ padding: 30,paddingTop:10 }}>
                test
            </div>)
    }
    private renderPanelFooterContent = (): JSX.Element => {
        return (
            <div>
                <div className="ms-Grid-row">
                    <PrimaryButton
                        
                        className="panel-footer-btn">
                        Save
                </PrimaryButton>
                    <DefaultButton className="panel-footer-btn" onClick={this.closePanel()}>
                        Cancel
                </DefaultButton>
                </div>
            </div>
        );
    };
    private closePanel() {
        return (): void => {
            this.setState({ showPanel: false });
        }
    };
    private addUser() {
        this.setState({ showPanel: true });

    }
    private editGroup() {
    }
    private deleteGroup() {
    }
}
