/**
 * Created by griga on 11/17/15.
 */

import React from 'react'

import FullScreen from '../../../components/layout/actions/FullScreen.jsx'
import ToggleMenu from '../../../components/layout/actions/ToggleMenu.jsx'
import SpeechButton from '../../../components/layout/actions/SpeechButton.jsx'
import SearchMobile from '../../../components/layout/actions/SearchMobile.jsx'

import DeviceDetect from '../../../components/layout/tools/DeviceDetect.jsx'
import ActivitiesDropdown from '../../../components/activities/ActivitiesDropdown.jsx'
import LanguageSelector from '../../../components/i18n/LanguageSelector.jsx'

import RecentProjects from './header/RecentProjects.jsx'

let Header = React.createClass({
    render: function () {
        return <header id="header">

            <RecentProjects />
            <div className="pull-right"  /*pulled right: nav area*/ >


                <ToggleMenu className="btn-header pull-right"  /* collapse menu button */ />


                {/* #MOBILE */}
                {/*  Top menu profile link : this shows only when top menu is active */}
                <ul id="mobile-profile-img" className="header-dropdown-list hidden-xs padding-5">
                    <li className="">
                        <a href-void className="dropdown-toggle no-margin userdropdown" data-toggle="dropdown">
                            <img src="styles/img/avatars/sunny.png" alt="John Doe" className="online"/>
                        </a>
                        <ul className="dropdown-menu pull-right">
                            <li>
                                <a href-void className="padding-10 padding-top-0 padding-bottom-0"><i
                                    className="fa fa-cog"/> Setting</a>
                            </li>
                            <li className="divider"/>
                            <li>
                                <a href="#/views/profile"
                                   className="padding-10 padding-top-0 padding-bottom-0"> <i className="fa fa-user"/>
                                    <u>P</u>rofile</a>
                            </li>
                            <li className="divider"/>
                            <li>
                                <a href-void className="padding-10 padding-top-0 padding-bottom-0"
                                   data-action="toggleShortcut"><i className="fa fa-arrow-down"/> <u>S</u>hortcut</a>
                            </li>
                            <li className="divider"/>
                            <li>
                                <a href-void className="padding-10 padding-top-0 padding-bottom-0"
                                   data-action="launchFullscreen"><i className="fa fa-arrows-alt"/> Full
                                    <u>S</u>creen</a>
                            </li>
                            <li className="divider"/>
                            <li>
                                <a href="#/login" className="padding-10 padding-top-5 padding-bottom-5"
                                   data-action="userLogout"><i
                                    className="fa fa-sign-out fa-lg"/> <strong><u>L</u>ogout</strong></a>
                            </li>
                        </ul>
                    </li>
                </ul>

                <FullScreen className="btn-header transparent pull-right" />

                {/* multiple lang dropdown : find all flags in the flags page */}
                <LanguageSelector />


            </div>
            {/* end pulled right: nav area */}

            <DeviceDetect />


        </header>
    }
});


export default Header