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 } 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 { PositionService } from '../../../../Services';
import { TextField } from 'office-ui-fabric-react/lib/components/TextField/TextField';
import { Dropdown } from 'office-ui-fabric-react/lib/components/Dropdown/Dropdown';
let _items: Position[] = [];

export interface IData {
    columns: IColumn[];
    items: Position[];
}
export class PositionList extends React.Component<any, any> {
    private _positionService: PositionService = new PositionService();

    constructor(props: any) {
        super(props);
        this.state = {
            showPanel: false,
            commands: new Array<Command>(),
            items: _items,
            columns: new Array<IColumn>(),
        };
        this.loadPosition();
        this.loadColumns()
    }
    private loadColumns() {
        this.state.columns.push({
            dataType: 'string',
            name: 'display Name',
            fieldName: 'displayName',
            minWidth:250,
            maxWidth:350
        });
       
    }
    private loadPosition() {
        this._positionService.listPositions().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: "addPosition",
                name: "Create Position",
                icon: "Add",
                onClick: this._showAddPositionPanel.bind(this)

            });
        return commands;
    }
    private getPositionCommands(): Command[] {
        let commands = this.getCommonCommands();
        commands.push(
            {
                key: "removePosition",
                name: "Remove",
                icon: "Remove",
                onClick: this.deletePosition.bind(this)
            },
            {
                key: "edit",
                name: "Edit",
                icon: "Edit",
                onClick: this.editPosition.bind(this)
            });

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


        this.setState({ commands: this.getPositionCommands() });
    }
    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: 'Position', key: 'Position', href: "/PositionList" },

                                ]}
                                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 Position"
                    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.lastName}  />
               </div>
              
               <div  className="ms-Grid-col ms-lg12">

                <Dropdown placeHolder="parent" label="parent" id="Basicdrop1" ariaLabel="parent"
                    options={[

                    ]}
                />
                </div>
            </div>
            )
    }
    private renderPanelFooterContent = (): JSX.Element => {
        return (
            <div>
                <div className="ms-Grid-row">
                    <PrimaryButton
                        onClick={this.addPosition}
                        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 _showAddPositionPanel = (): void => {
        this.setState({ showPanel: true });
    };
    private addPosition(item:any) {
        this._positionService.savePosition(item).then(result => {
            this.loadPosition();
            this.setState({ showPanel: false });

        });
    }
    
    private deletePosition(id:any) {
        if (id) {

            this._positionService.deletePosition(id)
                .then(result => {
                    this._positionService.listPositions().then(result => { this.setState({ items: result }) });
                    alert("Deleted successfully");
                }, error => {
                    alert(error.text());
                });
        }
    }
    private editPosition() {
    }
}
