import React from 'react';
import {connect} from 'react-redux';

import NavbarStatus from '../components/NavbarStatus.jsx';
import TaskBar from './TaskBar.jsx';

import * as appListAction from '../actions/appList';
import * as authAction from '../actions/auth';

import './Navbar.less';

class Navbar extends React.Component {
    constructor() {
        super();
        this.state = {
            showHomeDropdown: false
        };
    }

    render() {
        let appListBtnClass = 'icon-button';
        if (this.props.appList.showList) {
            appListBtnClass += ' active';
        }

        let homeBtnClass = 'icon-button';
        if (this.state.showHomeDropdown) {
            homeBtnClass += ' active';
        }

        let homeDropdown;
        if (this.state.showHomeDropdown) {
            homeDropdown = (
                <div className='navbar-dropdown'>
                    <div className='dropdown-item' onClick={this.toggleFullscreen.bind(this)}>
                        <span className='glyphicon glyphicon-fullscreen'></span>
                        <span className='dropdown-item-text'>Toggle Fullscreen</span>
                    </div>
                    <div className='dropdown-item' onClick={this.logout.bind(this)}>
                        <span className='glyphicon glyphicon-log-out'></span>
                        <span className='dropdown-item-text'>Logout</span>
                    </div>
                </div>
            );
        }

        return (
            <nav className='ui-navbar clearfix'>
                <button
                    className={homeBtnClass}
                    onClick={this.toggleHomeDropdown.bind(this)}
                    onBlur={this.hideHomeDropdown.bind(this)}
                >
                    <span className='icon glyphicon glyphicon-home'></span>
                    {homeDropdown}
                </button>
                <button
                    className={appListBtnClass}
                    onClick={this.toggleAppList.bind(this)}
                >
                    <span className='icon glyphicon glyphicon-th'></span>
                </button>

                <TaskBar />
                <NavbarStatus />
            </nav>
        );
    }

    toggleHomeDropdown() {
        this.setState({
            showHomeDropdown: !this.state.showHomeDropdown
        });
    }

    hideHomeDropdown() {
        this.setState({showHomeDropdown: false});
    }

    toggleFullscreen() {
        if (!document.fullscreenElement &&    // alternative standard method
            !document.mozFullScreenElement &&
            !document.webkitFullscreenElement &&
            !document.msFullscreenElement) {
            if (document.documentElement.requestFullscreen) {
                document.documentElement.requestFullscreen();
            }
            else if (document.documentElement.msRequestFullscreen) {
                document.documentElement.msRequestFullscreen();
            }
            else if (document.documentElement.mozRequestFullScreen) {
                document.documentElement.mozRequestFullScreen();
            }
            else if (document.documentElement.webkitRequestFullscreen) {
                document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
            }
        }
        else {
            if (document.exitFullscreen) {
                document.exitFullscreen();
            }
            else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            }
            else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            }
            else if (document.webkitExitFullscreen) {
                document.webkitExitFullscreen();
            }
        }
    }

    toggleAppList() {
        let {dispatch, appList} = this.props;
        if (appList.showList) {
            dispatch(appListAction.hideAppList());
        }
        else {
            dispatch(appListAction.showAppList());
        }
    }

    logout() {
        let {dispatch} = this.props;
        dispatch(authAction.logout());
    }

}

function mapStateToProps(state) {
    return state;
}

export default connect(mapStateToProps)(Navbar);