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/ListView';
import { Command, User, Country } 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 { UserService } from '../../../../Services';
import { TextField } from 'office-ui-fabric-react/lib/components/TextField/TextField';
import { Dropdown } from 'office-ui-fabric-react';
let _items: User[] = [];

export interface IData {
    columns: IColumn[];
    items: User[];
}
export class UserList extends React.Component<any, any> {
    private _userService: UserService = new UserService();

    constructor(props: any) {
        super(props);
        this.state = {
            showPanel: false,
            commands: new Array<Command>(),
            items: _items,
            columns: new Array<IColumn>(),
            selectedItem: {},
            countries: []
        };
        this.loadUsers();
        this.loadColumns();
        this.loadCountries();
    }

    private loadUsers() {
        this._userService.listUsers().then(result => {
            this.setState({ items: result })
            this.setState({ commands: this.getCommonCommands() });
        }, error => {
            alert(error.text());
        });

    }

    private loadCountries() {
        this._userService.listCountries().then(result => {

            this.setState({ countries: result })
        }, error => {
            alert(error.text());
        });
    }

    private loadColumns() {
        this.state.columns.push({
            dataType: 'string',
            name: 'display Name',
            fieldName: 'displayName',
            minWidth: 250,
            maxWidth: 350
        });
        this.state.columns.push({
            dataType: 'string',
            name: 'User Name',
            fieldName: 'Name',
            minWidth: 250,
            maxWidth: 350
        });
        this.state.columns.push({
            dataType: 'string',
            name: 'Status',
            fieldName: 'Status',
            minWidth: 250,
            maxWidth: 350
        })
    }

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

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

        return commands;
    }
    private selectedUserChanged(user: User) {
        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: '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="New User"
                    headerClassName="panelHeaderStyle"
                    hasCloseButton={false}
                >

                </Panel>

            </div>
        );
    }
    private renderPanelBody = (): JSX.Element => {
        return (
            <div style={{ padding: 30, paddingTop: 10 }}>
                <div className="ms-Grid-col ms-lg6">
                    <TextField label="First Name" type="text" autoComplete="on" value={this.state.selectedItem.name} onChanged={this._handleFNChange.bind(this)} />
                </div>
                <div className="ms-Grid-col ms-lg6">
                    <TextField label="Password" type="text" autoComplete="on" value={this.state.selectedItem.password} onChanged={this._handlepasswordChange.bind(this)} />
                </div>

                <div className="ms-Grid-col ms-lg12">

                    <TextField label="Email" type="email" autoComplete="on" value={this.state.selectedItem.Email} onChanged={this._handleEmailChange.bind(this)} />
                </div>
                <div className={"ms-Grid-col ms-sm12 ms-lg12"}>
                                <Dropdown
                                    selectedKey={this.state.selectedItem.countryId}
                                    onChanged={this._changeCountry.bind(this)}
                                    label="Country" 
                                    options={this.state.countries.map((item: Country) => {
                                        return { key: item.id, text: item.name }
                                    })}></Dropdown>
                            </div>
                {/* <div  className="ms-Grid-col ms-lg12">

                <Dropdown placeHolder="" label="Location" id="Basicdrop1" ariaLabel="Basic dropdown example"
                    options={[

                    ]}
                />
                </div> */}
            </div>)
    }

    _handleFNChange(value: any) {
        this.state.selectedItem.name = value;
    };

    _handlepasswordChange(value: any) {
        this.state.selectedItem.password = value;
    };
    _handleEmailChange(value: any) {
        this.state.selectedItem.Email = value;
    };
    _changeCountry(option: any){
        var selectedItem = this.state.selectedItem;
        selectedItem.countryId = option.key;
        this.setState({ selectedItem: selectedItem })
    }
    private renderPanelFooterContent = (): JSX.Element => {
        return (
            <div>
                <div className="ms-Grid-row">
                    <PrimaryButton
                        onClick={(e) => this.addUser(this.state.selectedItem)}
                        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 _showAddUserPanel = (): void => {
        this.setState({ showPanel: true });
    };
    private deleteUser() {
        if (this.state.selectedItem) {

            this._userService.deleteUser(this.state.selectedItem.id)
                .then(result => {
                    this._userService.listUsers().then(result => { this.setState({ items: result }) });
                    alert("Deleted successfully");
                }, error => {
                    alert(error.text());
                });
        }
    }
    private addUser(item: any) {
        this._userService.saveUser(item).then(result => {
            this.loadUsers();
            this.setState({ showPanel: false });

        });
    }
    private editUser() {
    }
    private viewUser() {
    }

}
