layout.jsx

/** @jsx React.DOM */
'use strict';


var React = require("react/addons");
var _ = require("lodash");
var $ = require("jquery");
var AtomReact = require("atom-react");
var classNames = require('classnames');


var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

// To differentiate between component initiating upload events.
var COMPONENT_FIELD = require("common/componentIdentity");
var CURRENT_COMPONENT_FIELD = COMPONENT_FIELD.LAYOUT;

var AppEvents = require("appEvents");
var Spinner = require("spinner/spinner");
var Menu = require("widgets/menu/menu");
var Breadcrumb = require("widgets/breadcrumb/breadcrumb");
var MainNavigation = require("widgets/navigation/main/mainNavigation");
var Stamples = require("stamples/stamples");
var UserSetting = require("widgets/userSetting/userSetting");
var UserSettingOverlay = UserSetting.UserSettingOverlay;
var ContactBar = require("widgets/contactBar/contactBar");
var UserSummary = require("widgets/userSummary/userSummary");
var RelationshipManager = require("widgets/relationshipManager/relationshipManager");
var RelationshipManagerOverlay = RelationshipManager.RelationshipManagerOverlay;
var ProfilePictureUpload = require("widgets/profilePictureUpload/profilePictureUpload");
var ErrorOverlay = require("widgets/errorOverlay/errorOverlay");
var ShowUsersPopUp = require("widgets/showUsersPopUp/showUsersPopUp");
var FileUploadSettingsPopUp = require("widgets/fileUploadSettingsPopUp/fileUploadSettingsPopUp");
var OfflineOverlay = require("widgets/offlineOverlay/offlineOverlay");
var UserDeletionGoodbyeOverlay = require("widgets/userDeletionGoodbyeOverlay/userDeletionGoodbyeOverlay");
var UserSessionExpired = require("widgets/userSessionExpired/userSessionExpired");
var Notification = require("widgets/notification/notification");
var CommunityCreation = require("widgets/communityCreation/communityCreation");
var CommunityDeletion = require("widgets/communityDeletion/communityDeletion");
var LeavingCommunity = require("widgets/leavingCommunity/leavingCommunity");
var CategoryCreation = require("widgets/categoryCreation/categoryCreation");
var CategoryEdition = require("widgets/categoryEdition/categoryEdition");
var CategoryMove = require("widgets/categoryMove/categoryMove");
var StampleMove = require("widgets/stampleMove/stampleMove");
var CategoryDeletion = require("widgets/categoryDeletion/categoryDeletion");
var Clipper = require("widgets/clipper/clipper");
var InviteByEmail = require("widgets/inviteByEmail/inviteByEmail");
var MaximisedStample = require("widgets/maximisedStample/maximisedStample");
var TimePickerPopUp = require("widgets/timePickerPopUp/timePickerPopUp");
var NewEventsBar = require("widgets/newEventsBar/newEventsBar");
var CategorySelection = require("widgets/categorySelection/categorySelection");
var FeedbackFromBootstrap = require("widgets/feedbackFromBootstrap/feedbackFromBootstrap");
var SharingManagementLibrary = require("widgets/sharingManagementLibrary/sharingManagementLibrary");
var SharingManagementCommunity = require("widgets/sharingManagementCommunity/sharingManagementCommunity");
var SharingManagementCommunityLibrary = require("widgets/sharingManagementCommunityLibrary/sharingManagementCommunityLibrary");
var ImagePanorama = require("widgets/imagePanorama/imagePanorama");

var CloseIcon = require("img/icons/close");
var WithDropCancelled = require("common/withDropCancelled");
var UploadProgress = require("widgets/uploadProgress/uploadProgress");
var FileUploadRepository = require("repositories/fileUploadRepository");
var UPLOAD_STATUS = require("common/uploadStatus").UPLOAD_STATUS;

var SelectedViewType = require("models/selectedViewType");

var OnboardingWelcome = require("widgets/onboardingWelcome/onboardingWelcome");
var OnboardingSteps = require("widgets/onboardingSteps/onboardingSteps");
var OnboardingClipperStepOverlay = require("widgets/onboardingSteps/onboardingClipperStepOverlay");
var OnboardingEndOverlay = require("widgets/onboardingSteps/onboardingEndOverlay");
var OnboardingStepsProgression = require("widgets/onboardingSteps/onboardingStepsProgression");
var OnboardingMobile = require("widgets/onboarding/mobile/onboardingMobile");



var Suggestions = require("widgets/suggestions/suggestions");



var NavigationUtils = require("widgets/navigation/common/navigationUtils");


var HigherOrderComponents = require("layout/higherOrderComponents");

var NewButton = require("widgets/newButton/newButton");


var LayoutSection = AtomReact.createPureClass("LayoutSection",{
    propTypes: {
        appStateCursor: AtomReact.PropTypes.isCursor
    },

    listenToEvents: function(event) {
        switch (event.name) {
            case AppEvents.Names.STAMPLE_SEARCH_TRIGGERED:
                this.scrollToTop();
                break;
            case AppEvents.Names.SPACE_SELECTED:
                if ( event.data.navigationName === NavigationUtils.MAIN_NAVIGATION ) {
                    this.scrollToTop();
                }
                break;
            case AppEvents.Names.VIEW_TYPE_SELECTED:
                this.scrollToTop();
                break;
        }
    },

    isIosApp: function () {
        if (window.device) {
            return parseFloat(window.device.version) >= 7;
        }
        else return false
    },

    scrollToTop: function () {
        if ( this.isMounted() ) {
            $(React.findDOMNode(this)).scrollTop(0);
        } else {
            console.warn("layout is not mounted so we can't scroll to top");
        }
    },

    interaction: function() {
        return this.props.appStateCursor.follow("interaction");
    },

    isNavigationDisplayed: function () {
        var displayed = this.interaction().follow("navigationDisplayed").getOrElse(false);
        // We force the display of navigation when we are at an onboarding step related to the naivgation
        return displayed
            || this.isCurrentOnboardingGroup(OnboardingSteps.GROUP_NAMES.NAVIGATE)
            || this.isCurrentOnboardingGroup(OnboardingSteps.GROUP_NAMES.CREATE_SPACE);
    },

    isContactsPinned: function () {
        return this.interaction().follow("contactsPinned").getOrElse(false);
    },

    isNotificationDisplayed: function(){
        return this.props.appStateCursor.follow("notification", "opened").getOrElse(false);
    },

    isTimePickerDisplayed:function () {
        return this.props.appStateCursor.follow("timePickerPopUpStore","opened").getOrElse(false);
    },

    isSearchMode: function() {
        return this.props.appStateCursor.follow("timeline","searchText").exists();
    },

    getCurrentOnboardingStep: function() {
        var finishedStepsCursor = this.props.appStateCursor.follow("onboardingSteps","finishedSteps");
        if ( finishedStepsCursor.exists() ) {
            return OnboardingSteps.getCurrentStep(finishedStepsCursor.get());
        }
    },
    getCurrentOnboardingGroup: function() {
        var finishedStepsCursor = this.props.appStateCursor.follow("onboardingSteps","finishedSteps");
        if ( finishedStepsCursor.exists() ) {
            return OnboardingSteps.getCurrentStepGroup(finishedStepsCursor.get());
        }
    },
    isOnboardingStep: function (stepName) {
        var step = this.getCurrentOnboardingStep();
        return !!(step && step === stepName);
    },
    isCurrentOnboardingGroup: function(groupName) {
        var group = this.getCurrentOnboardingGroup();
        return ( group && group === groupName );
    },

    maybeRenderNavigation: function() {
        var interactionStoreCursor = this.props.appStateCursor.follow("interaction");
        var navigationPinned = interactionStoreCursor.follow("navigationPinned").getOrElse(false);
        var navigationDisplayed = this.isNavigationDisplayed();
        if (navigationDisplayed) {
            return (
                <NavigationSection
                    dropzoneCursor={this.props.appStateCursor.follow("filesDropZone")}
                    appStateCursor={this.props.appStateCursor}
                    currentOnboardingStep={this.getCurrentOnboardingStep()}
                    navigationPinned={navigationPinned}
                    isIosApp={this.isIosApp()}
                    />
            );
        }
    },

    renderContacts: function() {
        var contactsPinned = this.isContactsPinned();
        if (contactsPinned) {
            return (
                <ContactBar
                    dropzoneCursor={this.props.appStateCursor.follow("filesDropZone")}
                    contactCursor={this.props.appStateCursor.follow("contactBar")}
                    userSummaryCursor={this.props.appStateCursor.follow("userSummary")}
                    isIosApp={this.isIosApp()}
                    />
            );
        }
    },

    maybeRenderNotification: function() {
        if(this.isNotificationDisplayed()){
            return <NotificationSection
                appStateCursor={this.props.appStateCursor}
                isIosApp={this.isIosApp()}
                />;
        }
    },

    maybeRenderOnboardingWelcome: function() {
        var displayed = this.props.appStateCursor.follow("onboardingSteps","onboardingWelcomeDisplayed").getOrElse(false);
        if ( displayed ) {
            return <OnboardingWelcome />;
        }
    },

    maybeRenderTimePickerPopUp: function () {
        if(this.isTimePickerDisplayed()) {
            return (<TimePickerPopUp
                timePickerPopUpStoreCursor={this.props.appStateCursor.follow("timePickerPopUpStore")}
                isIosApp={this.isIosApp()}
                />);
        }
    },

    maybeRenderCommunityCreation: function() {
        if ( this.props.appStateCursor.follow("communityCreation", "opened").getOrElse(false) ) {
            return <CommunityCreation communityCreationStore={this.props.appStateCursor.follow("communityCreation")}/>;
        }
    },

    maybeRenderCategoryCreation: function() {
        if ( this.props.appStateCursor.follow("categoryCreation", "opened").getOrElse(false) ) {
            return <CategoryCreation
                categoryCreationStore={this.props.appStateCursor.follow("categoryCreation")}
                currentOnboardingStep={this.getCurrentOnboardingStep()}
                />;
        }
    },

    maybeRenderCommunityDeletion: function() {
        if ( this.props.appStateCursor.follow( "communityDeletion", "opened").getOrElse(false) ) {
            return <CommunityDeletion
                communityDeletionStore={this.props.appStateCursor.follow( "communityDeletion")}
                />;
        }
    },

    maybeRenderLeavingCommunity: function() {
        if ( this.props.appStateCursor.follow( "leavingCommunity", "opened").getOrElse(false) ) {
            return <LeavingCommunity
                leavingCommunityStore={this.props.appStateCursor.follow("leavingCommunity")}
                />;
        }
    },

    maybeRenderCategoryEdition: function() {
        if ( this.props.appStateCursor.follow( "categoryEdition", "opened").getOrElse(false) ) {
            return <CategoryEdition
                categoryEditionStore={this.props.appStateCursor.follow( "categoryEdition")}
                />;
        }
    },

    maybeRenderCategoryMove: function() {
        if ( this.props.appStateCursor.follow( "categoryMove", "opened").getOrElse(false) ) {
            return <CategoryMove categoryMoveStore={this.props.appStateCursor.follow( "categoryMove")} />;
        }
    },

    maybeRenderStampleMove: function() {
        if ( this.props.appStateCursor.follow( "stampleMove", "opened").getOrElse(false) ) {
            return <StampleMove stampleMoveStore={this.props.appStateCursor.follow( "stampleMove")} />;
        }
    },

    maybeRenderSelectionCategory: function() {
        var isOpened = this.props.appStateCursor.follow( "categorySelection", "opened").getOrElse(false);
        var targetComponent = this.props.appStateCursor.follow( "categorySelection", "targetComponent").getOrElse("");
        if ( isOpened && (targetComponent === "STAMPLE_FORM") ) {
            return <CategorySelection categorySelectionStore={this.props.appStateCursor.follow("categorySelection")} />;
        }
    },

    maybeRenderCategoryDeletion: function() {
        if ( this.props.appStateCursor.follow( "categoryDeletion", "opened").getOrElse(false) ) {
            return <CategoryDeletion
                categoryDeletionStore={this.props.appStateCursor.follow( "categoryDeletion")}
                />;
        }
    },

    maybeRenderUserSetting: function() {
        if (this.props.appStateCursor.follow( "userSetting", "opened").getOrElse(false)) {
            return <UserSettingOverlay
                userSettingStoreCursor={this.props.appStateCursor.follow( "userSetting")}
                />
        }
    },

    maybeRenderRelationshipManager: function () {
        if (this.props.appStateCursor.follow( "relationshipManager", "opened").getOrElse(false)) {
            return <RelationshipManagerOverlay
                relationshipManagerStoreCursor={this.props.appStateCursor.follow( "relationshipManager")}
                />
        }
    },

    maybeRenderInviteByEmail: function () {
        if (this.props.appStateCursor.follow("inviteByEmail", "opened").getOrElse(false)) {
            return <InviteByEmail
                inviteByEmailStoreCursor={this.props.appStateCursor.follow("inviteByEmail")}
                />
        }
    },

    maybeRenderSharingManagementLibrary: function() {
        var storeCursor = this.props.appStateCursor.follow("sharingManagementLibrary");
        if (storeCursor.follow("opened").getOrElse(false)) {
            return (
                <SharingManagementLibrary
                    sharingManagement={storeCursor}
                />);
        }
    },

    maybeRenderSharingManagementCommunity: function() {
        var storeCursor = this.props.appStateCursor.follow("sharingManagementCommunity");
        if (storeCursor.follow("opened").getOrElse(false)) {
            return (
                <SharingManagementCommunity
                    sharingManagementCommunity={storeCursor}
                />);
        }
    },

    maybeRenderSharingManagementCommunityLibrary: function() {
        var storeCursor = this.props.appStateCursor.follow("sharingManagementCommunityLibrary");
        if (storeCursor.follow("opened").getOrElse(false)) {
            return (
                <SharingManagementCommunityLibrary
                    sharingManagementCommunityLibrary={storeCursor}
                />);
        }
    },

    maybeRenderImagePanorama: function () {
        if (this.props.appStateCursor.follow("imagePanorama", "opened").getOrElse(false)) {
            return (
                <ImagePanorama
                    imagePanoramaCursor={this.props.appStateCursor.follow("imagePanorama")}
                />);
        }
    },

    maybeRenderMaximisedStample: function () {
        var storeCursor = this.props.appStateCursor.follow("maximisedStample");
        var isOpened = storeCursor.follow("opened").getOrElse(false);
        if (isOpened) {
            return <MaximisedStample
                maximisedStampleStoreCursor={storeCursor}
                isIosApp={this.isIosApp()}
                />;
        }
    },

    maybeRenderExpiredSession: function() {
        var cursor = this.props.appStateCursor.follow("userSessionExpired");
        if ( cursor.follow("expired").getOrElse(false) ) {
            return <UserSessionExpired userSessionExpiredStore={cursor}/>
        }
    },

    maybeRenderOnboardingClipperHelpOverlay: function() {
        if ( this.isCurrentOnboardingGroup(OnboardingSteps.GROUP_NAMES.USE_CLIPPER) ) {
            return <OnboardingClipperStepOverlay onboardingStoreCursor={this.props.appStateCursor.follow("onboardingSteps")}/>
        }
    },

    renderNewButton: function() {
        return <NewButton
            newbuttonCursor={this.props.appStateCursor.follow("newButton")}
            currentOnboardingStep={this.getCurrentOnboardingStep()}
            />
    },

    renderOnboardingEnd: function() {
        return <OnboardingEndSection onboardingSteps={this.props.appStateCursor.follow("onboardingSteps")}/>;
    },
    renderOnboardingStepsProgression: function() {
        return <OnboardingProgressSection onboardingSteps={this.props.appStateCursor.follow("onboardingSteps")}/>;
    },

    maybeRenderOfflineOverlay: function() {
        var isConnectionDown = this.props.appStateCursor.follow("offlineOverlay","connectionDown").get();
        if ( isConnectionDown ) {
            return <OfflineOverlay offlineOverlayStore={this.props.appStateCursor.follow("offlineOverlay")}/>;
        }
    },

    maybeRenderErrorOverlay: function() {
        var isOpen = this.props.appStateCursor.follow("errorOverlay","open").getOrElse(false);
        if ( isOpen ) {
            return <ErrorOverlay errorOverlayStore={this.props.appStateCursor.follow("errorOverlay")}/>;
        }
    },

    maybeRenderUserPopUpOverlay: function () {
        var isOpen = this.props.appStateCursor.follow("showUsersPopUpStore", "opened").getOrElse(false);
        if (isOpen) {
            return <ShowUsersPopUp showUsersPopUpStore={this.props.appStateCursor.follow("showUsersPopUpStore")}/>;
        }
    },

    maybeRenderFileUploadSettingsPopUpOverlay: function () {
        var isOpen = this.props.appStateCursor.follow("fileUploadSettingsPopUp", "opened").getOrElse(false);
        if (isOpen) {
            return <FileUploadSettingsPopUp fileUploadSettingsCursor={this.props.appStateCursor.follow("fileUploadSettingsPopUp")}/>;
        }
    },

    maybeRenderProfilePictureUploadOverlay: function() {
        var isOpen = this.props.appStateCursor.follow("profilePictureUpload","open").getOrElse(false);
        if ( isOpen ) {
            return <ProfilePictureUpload profilePictureUploadStore={this.props.appStateCursor.follow("profilePictureUpload")}/>;
        }
    },

    maybeRenderUserDeletionGoodbyeOverlay: function() {
        var isOpen = this.props.appStateCursor.follow("userDeletionGoodbyeOverlay","open").getOrElse(false);
        if ( isOpen ) {
            return <UserDeletionGoodbyeOverlay userDeletionGoodbyeOverlayStore={this.props.appStateCursor.follow("userDeletionGoodbyeOverlay")}/>;
        }
    },

    maybeRenderFeedbackFromBootstrapData: function() {
        var cursor = this.props.appStateCursor.follow("feedbackFromBootstrap");
        var feedbackToDisplay = cursor.follow("feedback").getOrElse(false);
        if ( feedbackToDisplay ) {
            return <FeedbackFromBootstrap cursor={cursor}/>;
        }
    },

    maybeRenderClipperSection: function() {
        var cursor = this.props.appStateCursor.follow("clipper");
        if ( cursor.follow("open").get() ) {
            return <Clipper clipperStore={cursor} categorySelectionStore={this.props.appStateCursor.follow("categorySelection")}/>;
        }
    },

    mayBeRenderClipperProgress: function() {
        var cursor = this.props.appStateCursor.follow("clipper");
        if (cursor.follow("reduced").getOrElse(false)) {
            return <ClipperProgressSection clipperProgressStore={cursor}/>;
        }
    },


    // /!\ order matters in some cases! TODO remove this order need
    maybeRenderOverlayContent: function() {
        var content = (
            this.maybeRenderClipperSection() ||
            this.maybeRenderOnboardingWelcome() ||
            this.maybeRenderErrorOverlay() ||
            this.maybeRenderUserDeletionGoodbyeOverlay() ||
            this.maybeRenderOnboardingClipperHelpOverlay() ||
            this.maybeRenderExpiredSession() ||
            this.maybeRenderCommunityCreation() ||
            this.maybeRenderCommunityDeletion() ||
            this.maybeRenderLeavingCommunity() ||
            this.maybeRenderCategoryCreation() ||
            this.maybeRenderCategoryEdition() ||
            this.maybeRenderCategoryMove() ||
            this.maybeRenderStampleMove() ||
            this.maybeRenderSelectionCategory() ||
            this.maybeRenderCategoryDeletion() ||
            this.maybeRenderProfilePictureUploadOverlay() ||
            this.maybeRenderUserSetting() ||
            this.maybeRenderRelationshipManager() ||
            this.maybeRenderInviteByEmail() ||
            this.maybeRenderImagePanorama() ||
            this.maybeRenderUserPopUpOverlay() ||
            this.maybeRenderFileUploadSettingsPopUpOverlay() ||
            this.maybeRenderFeedbackFromBootstrapData() ||
            this.maybeRenderSharingManagementLibrary() ||
            this.maybeRenderSharingManagementCommunity() ||
            this.maybeRenderSharingManagementCommunityLibrary()
        );
        // console.debug("content",content);
        return content;
    },


    renderUploadProgress: function() {
        return <UploadProgressSection uploadProgressStore={this.props.appStateCursor.follow("uploadProgress")}/>;
    },

    renderStamplesSection: function() {
        return (
            <StamplesSection
                dropzoneCursor={this.props.appStateCursor.follow("filesDropZone")}
                appStateCursor={this.props.appStateCursor}
                isIosApp={this.isIosApp()}
                currentOnboardingStep={this.getCurrentOnboardingStep()}/>
        );
    },

    renderMenuSection: function() {
        return (
            <MenuSection
                dropzoneCursor={this.props.appStateCursor.follow("filesDropZone")}
                isIosApp={this.isIosApp()}
                appStateCursor={this.props.appStateCursor}/>
        );
    },

    renderBreadcrumb: function() {
        return <Breadcrumb
            breadcrumbStore={this.props.appStateCursor.follow("breadcrumb")}
            isIosApp={this.isIosApp()}
            />;
    },

    maybeRenderNewEventsBar: function() {
        var timelineStore = this.props.appStateCursor.follow("timeline");
        var totalNewStampleEvents = timelineStore.follow("newStamplesEvents","total").getOrElse(0);
        var thereAreNewEventsToDisplay = (totalNewStampleEvents > 0);
        if ( thereAreNewEventsToDisplay && !this.isSearchMode() ) {
            return <NewEventsBar eventNumber={totalNewStampleEvents}/>
        }
    },

    maybeRenderOnboardingMobile: function() {
        var open = this.props.appStateCursor.follow("onboardingMobile","opened").get();
        if ( open ) {
            return <OnboardingMobile/>;
        }
    },

    render: function() {
        return (
            <section id="layout">
                {this.renderBreadcrumb()}
                {this.renderMenuSection()}
                <ReactCSSTransitionGroup transitionName="navigation-sliding">
                    {this.maybeRenderNavigation()}
                </ReactCSSTransitionGroup>
                {this.renderContacts()}
                {this.renderNewButton()}
                <ReactCSSTransitionGroup transitionName="notification-sliding">
                    {this.maybeRenderNotification()}
                </ReactCSSTransitionGroup>
                {this.renderOnboardingStepsProgression()}
                {this.renderOnboardingEnd()}
                {this.maybeRenderOnboardingMobile()}
                {this.renderStamplesSection()}
                {this.maybeRenderOverlayContent()}
                <ReactCSSTransitionGroup transitionName="opened-stample-sliding">
                    {this.maybeRenderMaximisedStample()}
                </ReactCSSTransitionGroup>
                {this.maybeRenderTimePickerPopUp()}
                <Suggestions suggestionsStore={this.props.appStateCursor.follow("suggestions")}/>
                {this.renderUploadProgress()}
                {this.mayBeRenderClipperProgress()}
                {this.maybeRenderOfflineOverlay()}
                {this.maybeRenderNewEventsBar()}
            </section>
        );
    }
});

var MenuSection = AtomReact.createPureClass("MenuSection",{
    propTypes: {
        appStateCursor: AtomReact.PropTypes.isCursor,
        isIosApp: React.PropTypes.boolean
    },
    stampleEnvironment: function () {
        return this.props.appStateCursor.follow("menu","stampleEnvironment").get();
    },
    isMobileMenuDisplayed: function () {
        return this.props.appStateCursor.follow("menu","menuMobileDisplayed").get();
    },

    render: function() {
        var classes = {
            "mobile-menu-displayed": this.isMobileMenuDisplayed(),
            "is-ios-app": this.props.isIosApp
        };
        classes[this.stampleEnvironment().toLowerCase()] = true;
        return (
            <section id="menu" className={classNames(classes)}>
                <Menu
                    interactionStoreCursor={this.props.appStateCursor.follow("interaction")}
                    onboardingStore={this.props.appStateCursor.follow("onboardingSteps")}
                    notificationStore={this.props.appStateCursor.follow("notification")}
                    menuStore={this.props.appStateCursor.follow("menu")}
                    searchBarStore={this.props.appStateCursor.follow("searchBar")}
                    />
            </section>
        );
    }
});

var NavigationSection = AtomReact.createPureClass("NavigationSection",{
    propTypes: {
        appStateCursor: AtomReact.PropTypes.isCursor,
        currentOnboardingStep: React.PropTypes.string,
        navigationPinned: React.PropTypes.bool,
        isIosApp: React.PropTypes.bool
    },

    isOnboardingOpened: function(){
        return this.props.appStateCursor.follow("onboardingSteps","onboardingStepsGuideShow").getOrElse(false);
    },

    onNavigationHovered: function () {
        this.publish(AppEvents.navigationHovered());
    },
    onNavigationLeaved: function () {
        this.publish(AppEvents.navigationLeaved());
    },

    render: function() {
        var onBoardingOpened = this.isOnboardingOpened();
        var navigationPinned = this.props.navigationPinned;
        var className = classNames({
            "onboarding-opened": onBoardingOpened,
            "navigation-pinned": navigationPinned,
            "is-ios-app": this.props.isIosApp
        });
        return (
            <section id="navigation" className={className}
                     onMouseEnter={this.onNavigationHovered}
                     onMouseLeave={this.onNavigationLeaved}>
                <MainNavigation
                    navigationStore={this.props.appStateCursor.follow("mainNavigation")}
                    currentOnboardingStep={this.props.currentOnboardingStep}
                    />
            </section>
        );
    }
});

var NotificationSection = AtomReact.createPureClass("NotificationSection",{
    propTypes: {
        appStateCursor: AtomReact.PropTypes.isCursor,
        isIosApp: React.PropTypes.bool
    },

    render: function() {
        var notificationStoreCursor = this.props.appStateCursor.follow("notification");

        var className = classNames({
            "is-ios-app": this.props.isIosApp
        });
        return (
            <section id="notification" className={className}>
                <Notification notificationStoreCursor={notificationStoreCursor}/>
            </section>
        )
    }
});


var StamplesSection = AtomReact.createPureClass("StamplesSection",{

    propTypes: {
        appStateCursor: AtomReact.PropTypes.isCursor,
        currentOnboardingStep: React.PropTypes.string,
        isIosApp: React.PropTypes.boolean
    },

    isNavigationPinned: function() {
        return this.props.appStateCursor.follow("interaction", "navigationPinned").getOrElse(false);
    },

    areNotificationsOpened: function() {
        return this.props.appStateCursor.follow("notification", "opened").getOrElse(false);
    },

    isContactsPinned: function() {
        return this.props.appStateCursor.follow("interaction", "contactsPinned").getOrElse(false);
    },

    isOnboardingStepsTutorialOpenerDisplayed: function() {
        var tutorialSeen = this.props.appStateCursor.follow("onboardingSteps","stepsTutorialSeen").get();
        var tutorialDisplayed = this.props.appStateCursor.follow("onboardingSteps","onboardingStepsGuideShow").get();
        return !tutorialSeen && !tutorialDisplayed;
    },

    render: function() {
        var navigationPinned = this.isNavigationPinned();
        var areNotificationsOpened = this.areNotificationsOpened();
        var contactsPinned = this.isContactsPinned();
        var classes = {
            "with-sidebars": navigationPinned && contactsPinned && areNotificationsOpened,
            "with-navigation": navigationPinned,
            "with-navigation-only": navigationPinned && !contactsPinned && !areNotificationsOpened,
            "with-contacts-only": !navigationPinned && contactsPinned && !areNotificationsOpened,
            "with-notification-only": !navigationPinned && !contactsPinned && areNotificationsOpened,
            "without-contacts": navigationPinned && !contactsPinned && areNotificationsOpened,
            "without-navigation": !navigationPinned && contactsPinned && areNotificationsOpened,
            "without-notification": navigationPinned && contactsPinned && !areNotificationsOpened,
            "without-sidebars": !navigationPinned && !contactsPinned && !areNotificationsOpened,
            "is-ios-app": this.props.isIosApp
        };
        var selectedSpaceType = this.props.appStateCursor.follow("timeline","selectedSpace","type").get();
        var selectedViewType = this.props.appStateCursor.follow("timeline","selectedViewType").get();
        classes["selected-space-type-"+selectedSpaceType.toLowerCase()] = true;
        classes["selected-view-type-"+selectedViewType.toLowerCase()] = true;
        return (
            <section id="stamples" className={classNames(classes)}>
                <Stamples
                    timelineStoreCursor={this.props.appStateCursor.follow("timeline")}
                    spaceOverviewStoreCursor={this.props.appStateCursor.follow("spaceOverview")}
                    openedStamplesStoreCursor={this.props.appStateCursor.follow("openedStamples")}
                    userProfileStoreCursor={this.props.appStateCursor.follow("userProfile")}
                    currentOnboardingStep={this.props.currentOnboardingStep}
                    showOnboardingStepsTutorialOpener={this.isOnboardingStepsTutorialOpenerDisplayed()}
                    />
            </section>
        );
    }
});
module.exports = LayoutSection;



var UploadProgressSection = AtomReact.createPureClass("UploadProgressSection", {
    propTypes: {
        uploadProgressStore: AtomReact.PropTypes.isCursor
    },

    abortUploadProcess: function(fileId) {
        FileUploadRepository.abortUpload(fileId);
    },

    uploadProgressCursor: function() {
        return this.props.uploadProgressStore;
    },

    shouldRender: function() {
        var isOpened = this.props.uploadProgressStore.follow("opened").getOrElse(false);
        var filesToUpload = _.compact(_.values(cursor.getOrEmptyObject()));
        if ( isOpened || filesToUpload.length > 0 ) {
            var ind = _.findIndex(filesToUpload, function(file) {
                return file.status != UPLOAD_STATUS.INIT;
            });
            return isOpened || (ind != -1);
        }
    },

    render: function() {
        var isOpened = this.props.uploadProgressStore.follow("opened").getOrElse(false);
        if ( !isOpened ) {
            return false;
        }
        return (
            <section id="upload-progress-layout">
                <UploadProgress
                    uploadProgressCursor={this.uploadProgressCursor()}
                    onClickOnCloseIcon={this.abortUploadProcess}
                />
            </section>
        );
    }
});



var ClipperProgressSection = AtomReact.createPureClass("ClipperProgressSection", {
    propTypes: {
        clipperProgressStore: AtomReact.PropTypes.isCursor
    },

    cursor: function() {
        return this.props.clipperProgressStore;
    },

    stampleCursor: function() {
        return this.cursor().follow("stample");
    },
    stample: function() {
        return this.stampleCursor().get();
    },
    stampleId: function() {
        return this.stampleCursor().asyncSuccess().follow("id").get();
    },

    render: function() {
        if (this.stample().isLoading()) {
            return (
                <section id="clipper-progress-layout">
                    <div className="saving-msg saving"> saving...</div>
                    <Spinner/>
                </section>
            );
        }
        else if (this.stample().isError()) {
            return (
                <section id="clipper-progress-layout">
                    <div className="saving-msg error"> error!</div>
                </section>
            );
        }
        else {
            return (
                <section id="clipper-progress-layout">
                    <div className="saving-msg saved"> saved!</div>
                </section>
            );
        }
    }
});


var OnboardingProgressSection = AtomReact.createPureClass("OnboardingProgressSection",{
    propTypes: {
        onboardingSteps: AtomReact.PropTypes.isCursor
    },
    isOnboardingEnd: function() {
        var finishedStepsCursor = this.props.onboardingSteps.follow("finishedSteps");
        return finishedStepsCursor.exists() && OnboardingSteps.isAllGroupsFinished(finishedStepsCursor.get());
    },
    render: function() {
        var show = !this.isOnboardingEnd() && this.props.onboardingSteps.follow("onboardingStepsGuideShow").get();
        if ( show ) {
            return (
                <section id="onboarding-steps-progression">
                    <OnboardingStepsProgression onboardingStoreCursor={this.props.onboardingSteps}/>
                </section>);
        }
        else {
            return false;
        }
    }
});


var OnboardingEndSection = AtomReact.createPureClass("OnboardingEndSection",{
    propTypes: {
        onboardingSteps: AtomReact.PropTypes.isCursor
    },
    isOnboardingEnd: function() {
        var finishedStepsCursor = this.props.onboardingSteps.follow("finishedSteps");
        return finishedStepsCursor.exists() && OnboardingSteps.isAllGroupsFinished(finishedStepsCursor.get());
    },
    render: function() {
        if ( this.isOnboardingEnd() ) {
            return <OnboardingEndOverlay onboardingStore={this.props.onboardingSteps}/>;
        }
        else {
            return false;
        }
    }
});



// Apply higher order component to all the components that should be drop zones
StamplesSection = HigherOrderComponents.DropZone(StamplesSection);

// Apply higher order component to all the components that should be overlayed
OnboardingWelcome = HigherOrderComponents.Overlayed(OnboardingWelcome);
ErrorOverlay = HigherOrderComponents.Overlayed(ErrorOverlay);
UserDeletionGoodbyeOverlay = HigherOrderComponents.Overlayed(UserDeletionGoodbyeOverlay);
OnboardingEndOverlay = HigherOrderComponents.Overlayed(OnboardingEndOverlay);
OnboardingClipperStepOverlay = HigherOrderComponents.Overlayed(OnboardingClipperStepOverlay);
UserSessionExpired = HigherOrderComponents.Overlayed(UserSessionExpired);
CommunityCreation = HigherOrderComponents.Overlayed(CommunityCreation);
CommunityDeletion = HigherOrderComponents.Overlayed(CommunityDeletion);
LeavingCommunity = HigherOrderComponents.Overlayed(LeavingCommunity);
CategoryCreation = HigherOrderComponents.Overlayed(CategoryCreation);
CategoryEdition = HigherOrderComponents.Overlayed(CategoryEdition);
CategoryMove = HigherOrderComponents.Overlayed(CategoryMove);
StampleMove = HigherOrderComponents.Overlayed(StampleMove);
CategorySelection = HigherOrderComponents.Overlayed(CategorySelection);
CategoryDeletion = HigherOrderComponents.Overlayed(CategoryDeletion);
ProfilePictureUpload = HigherOrderComponents.Overlayed(ProfilePictureUpload);
InviteByEmail = HigherOrderComponents.Overlayed(InviteByEmail);
FeedbackFromBootstrap = HigherOrderComponents.Overlayed(FeedbackFromBootstrap);
UserSettingOverlay = HigherOrderComponents.Overlayed(UserSettingOverlay);
RelationshipManagerOverlay = HigherOrderComponents.Overlayed(RelationshipManagerOverlay);
ShowUsersPopUp = HigherOrderComponents.Overlayed(ShowUsersPopUp);
FileUploadSettingsPopUp = HigherOrderComponents.Overlayed(FileUploadSettingsPopUp);
NotificationSection = HigherOrderComponents.Overlayed(NotificationSection);
SharingManagementLibrary = HigherOrderComponents.Overlayed(SharingManagementLibrary);
SharingManagementCommunity = HigherOrderComponents.Overlayed(SharingManagementCommunity);
SharingManagementCommunityLibrary = HigherOrderComponents.Overlayed(SharingManagementCommunityLibrary);
Clipper = HigherOrderComponents.Overlayed(Clipper);
ImagePanorama = HigherOrderComponents.Overlayed(ImagePanorama);