import * as React from 'react';
import { Breadcrumb } from 'office-ui-fabric-react/lib/components/Breadcrumb/Breadcrumb';
import { CommandsBar } from '../../../../Controls/CommandsBar';
import { ListView } from '../../../../Controls';
import { Command, OrganizationUnit } 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';
import { OrganizationService } from '../../../../Services';
import { Label } from 'office-ui-fabric-react/lib/components/Label/Label';
import { TextField } from 'office-ui-fabric-react/lib/components/TextField/TextField';
import {  PrimaryButton as NewPrimaryButton } from "../../../../Customizations/Controls/PrimaryButton";

let _items: OrganizationUnit[] = [];

export interface IData {
    columns: IColumn[];
    items: OrganizationUnit[];
}
export class OrganizationUnitList extends React.Component<any, any> {
    private _organizationsService: OrganizationService = new OrganizationService();

    constructor(props: any) {
        super(props);
        this.state = {
            showPanel: false,
            showOrganizationUnitPanel:false,
            commands: new Array<Command>(),
            items: _items,
            columns: new Array<IColumn>(),
            selectedItem:{}
        };
        this.loadOrganizationsUnit();
        this.loadColumns();
    }
    private loadColumns() {
        this.state.columns.push({
            dataType: 'string',
            name: 'Organization Unit Name',
            fieldName: 'displayName',
            minWidth: 250,
            maxWidth: 350
        });
    }
    private loadOrganizationsUnit() {
        this._organizationsService.listOrganizations().then(result => {
            this.setState({ items: result })
            this.setState({ commands: this.getCommonCommands() });
        }, error => {
            alert(error.text());
        });

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

            });
        commands.push(
            {
                key: "viewOrganization",
                name: "View",
                icon: "View",
                onClick: this.viewOrganization.bind(this)

            });

        return commands;
    }
    private getUserCommands(): Command[] {
        let commands = this.getCommonCommands();
        commands.push(
            {
                key: "removeUser",
                name: "Remove",
                icon: "Remove",
                onClick: this.deleteOrganizationUnit.bind(this)
            },
            {
                key: "edit",
                name: "Edit",
                icon: "Edit",
                onClick: this.editOrganizationUnit.bind(this)
            });

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


        this.setState({ commands: this.getUserCommands() });
    }
    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: 'Organization Unit', key: 'OrganizationUnit', href: "/OrganizationUnitList" },

                                ]}
                                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="Add Organization Unit"
                    headerClassName="panelHeaderStyle"
                    hasCloseButton={false}
                >

                </Panel>
                <Panel
                    className="panelStyle"
                    isOpen={this.state.showOrganizationUnitPanel}
                    onDismissed={this.closeOrganizationUnitPanell.bind(this)}
                    type={PanelType.medium}
                    onRenderFooterContent={this.renderMemebersPanelFooterContent.bind(this)}
                    onRenderBody={this.MemebersPanelBody.bind(this)}
                    headerText="Organization Unit"
                    headerClassName="panelHeaderStyle"
                    hasCloseButton={false}
                >

                </Panel>

            </div>
        );
    }
    private renderPanelBody = (): JSX.Element => {
        return (
            <div style={{ padding: 30, paddingTop: 10 }}>
                 <div  className="ms-Grid-col ms-lg12">
                <TextField label="Dispaly Name" type="text" autoComplete="on" value={this.state.selectedItem.name} onChanged={this._handleNameChange.bind(this)}  />
               </div>
            </div>
            )
    }
    _handleNameChange(value: any) {
        this.state.selectedItem.name = value;
    };
    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 MemebersPanelBody = (): JSX.Element => {
        return (
            <div style={{ padding: 30, paddingTop: 10 }}>
                <div className="ms-Grid-col ms-lg6"> <Label>Organization Unit Id</Label></div>
                <div className="ms-Grid-col ms-lg6"> <Label> 1</Label></div>
                <div className="ms-Grid-col ms-lg6"> <Label>Name</Label></div>
                <div className="ms-Grid-col ms-lg6"> <Label>Organization Unit 1</Label></div>
                <div className="ms-Grid-col ms-lg6"> <Label>Parent</Label></div>
                <div className="ms-Grid-col ms-lg6"> <Label>Organization Unit 0</Label></div>

                
            </div>)
    }
    
    private renderMemebersPanelFooterContent = (): JSX.Element => {
        return (
            <div>
                <div className="ms-Grid-row">
                    <NewPrimaryButton 

                        onClick={this.addOrganizationUnit}
                        className="panel-footer-btn">
                        Save
                </NewPrimaryButton>
                    <DefaultButton className="panel-footer-btn" onClick={this.closeOrganizationUnitPanell()}>
                        Cancel
                </DefaultButton>
                </div>
            </div>
        );
    };
    private closePanel() {
        return (): void => {
            this.setState({ showPanel: false });
        }
    };
    private closeOrganizationUnitPanell() {
        return (): void => {
            this.setState({ showOrganizationUnitPanel: false });
        }
    };
    private _showAddOrganizationUnitPanel = (): void => {
        this.setState({ showPanel: true });
    };
        private addOrganizationUnit(item:any, button: any) {
            if (button && button.block) button.block();

            this._organizationsService.saveOrganization(item).then(result => {
                this.loadOrganizationsUnit();
                this.setState({ showPanel: false });
                if (button && button.unblock) button.unblock();
    
            });
        }

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

            this._organizationsService.deleteOrganization(id)
                .then(result => {
                    this._organizationsService.listOrganizations().then(result => { this.setState({ items: result }) });
                    alert("Deleted successfully");
                }, error => {
                    alert(error.text());
                });
        }
    }
    private editOrganizationUnit() {
    }
    private viewOrganization() {
        this.setState({ showOrganizationUnitPanel: true });

    }
}
