import React from 'react';
import { Navbar, Nav, NavItem, NavDropdown, MenuItem } from 'react-bootstrap';
import { app } from '../core/app';
import SearchBox from './search-box';
import { hasPerm, logout } from './session';
import { Fa } from '../components';
import { WORKSPACE_CHANGE } from '../core/actions';
import SessionUtils from './session-utils';

import './toolbar.less';

function userMenuSel(key) {
    switch (key) {
        case 'lang':
            app.dispatch('change-lang');
            break;
        case 'ws':
            app.dispatch('open-ws-sel');
            break;
        default:
            break;
    }
}

/**
 * The home page of the initialization module
 */
export default class Toolbar extends React.Component {

    constructor() {
        super();
        this._onAppChange = this._onAppChange.bind(this);
    }

    componentDidMount() {
        app.add(this._onAppChange);
    }

    shouldComponentUpdate() {
        return false;
    }

    componentWillUnmount() {
        app.remove(this._onAppChange);
    }

    _onAppChange(action) {
        if (action === WORKSPACE_CHANGE) {
            this.forceUpdate();
        }
        return null;
    }

    cmdLogout() {
        logout().then(() => app.goto('/pub/login'));
    }

    showAdmin() {
        return hasPerm('ADMIN') && !app.storage.state.app.clientMode;
    }

    goHome() {
        location.hash = SessionUtils.homeHash();
    }

    render() {
        var Logo = React.createElement(
            'a',
            null,
            React.createElement('img', { src: 'images/logo2.png' })
        );

        const session = app.getState().session;

        const settings = React.createElement(
            'span',
            { className: 'tb-icon' },
            React.createElement('i', { className: 'fa fa-cogs' })
        );

        const langName = app.getState().app.languages.find(item => item.id === app.getLang()).name;

        return React.createElement(
            Navbar,
            { className: 'toolbar', fixedTop: true, inverse: true, collapseOnSelect: true },
            React.createElement(
                Navbar.Header,
                null,
                React.createElement(
                    Navbar.Brand,
                    null,
                    Logo
                ),
                React.createElement(Navbar.Toggle, null)
            ),
            React.createElement(
                Navbar.Collapse,
                null,
                React.createElement(
                    Nav,
                    null,
                    React.createElement(
                        NavItem,
                        { href: SessionUtils.homeHash(), onClick: this.goHome },
                        __('home')
                    ),
                    app.storage.state.app.clientMode && React.createElement(
                        NavItem,
                        { href: '#/sys/sync', className: 'mright-2x' },
                        'Synchronize'
                    ),
                    hasPerm('ADMIN') && !app.storage.state.app.clientMode && React.createElement(
                        NavDropdown,
                        { id: 'dd-admin', eventKey: 3, title: __('admin') },
                        React.createElement(
                            MenuItem,
                            { href: '#/sys/admin/tables' },
                            __('admin.tables')
                        ),
                        React.createElement(
                            MenuItem,
                            { href: '#/sys/admin/reports' },
                            __('admin.reports')
                        ),
                        React.createElement(
                            MenuItem,
                            { href: '#/sys/admin/settings' },
                            __('admin.config')
                        )
                    )
                ),
                React.createElement(
                    Nav,
                    { pullRight: true },
                    React.createElement(
                        NavItem,
                        { className: 'tb-user', href: '#/sys/home/index', disabled: true },
                        React.createElement(
                            'div',
                            { className: 'tb-icon' },
                            React.createElement('i', { className: 'fa fa-user fa-inverse' })
                        ),
                        React.createElement(
                            'span',
                            { style: { color: '#889987' } },
                            session.userName
                        )
                    ),
                    React.createElement(
                        NavDropdown,
                        { id: 'ddUser', eventKey: 3, title: settings, onSelect: userMenuSel },
                        React.createElement(
                            MenuItem,
                            { href: '#/sys/user/settings' },
                            React.createElement(
                                'div',
                                null,
                                React.createElement(Fa, { icon: 'cog' }),
                                __('session.usersettings')
                            )
                        ),
                        React.createElement(
                            MenuItem,
                            { href: '#/sys/user/changepassword' },
                            React.createElement(
                                'div',
                                null,
                                React.createElement(Fa, { icon: 'key' }),
                                __('changepwd')
                            )
                        ),
                        React.createElement(MenuItem, { divider: true }),
                        React.createElement(
                            MenuItem,
                            { eventKey: 'lang' },
                            React.createElement(
                                'div',
                                null,
                                __('changelang'),
                                React.createElement(
                                    'div',
                                    { className: 'text-muted' },
                                    React.createElement(Fa, { icon: 'angle-right' }),
                                    langName
                                )
                            )
                        ),
                        React.createElement(MenuItem, { divider: true }),
                        React.createElement(
                            MenuItem,
                            { eventKey: 'ws' },
                            React.createElement(
                                'div',
                                null,
                                __('changews'),
                                React.createElement(
                                    'div',
                                    { className: 'text-muted' },
                                    React.createElement(Fa, { icon: 'globe' }),
                                    session.workspaceName
                                )
                            )
                        ),
                        React.createElement(MenuItem, { divider: true }),
                        React.createElement(
                            MenuItem,
                            { eventKey: '4', onClick: this.cmdLogout },
                            React.createElement(
                                'div',
                                null,
                                React.createElement(Fa, { icon: 'sign-out' }),
                                __('action.logout')
                            )
                        )
                    )
                ),
                React.createElement(
                    Navbar.Form,
                    null,
                    React.createElement(SearchBox, null)
                )
            )
        );
    }
}