/*
Rookeries client app

@copyright (c) Copyright 2013-2016 Dorian Pula
@license AGPL v3
@author Dorian Pula [dorian.pula@amber-penguin-software.ca]
*/

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

import {ConnectedUserLogin} from "../views/user_login_modal";
import {ConnectedThemeSwitchView} from "../views/theme_switcher_button";

import {SiteHeader} from "../views/site_header";
import {SiteFooter} from "../views/site_footer";
import {ConnectedNavigationMenu} from "../views/navigation_menu";

// TODO: Add in React Bootstrap rows + columns.
class App extends React.Component {
    static get propTypes() {
        return {
            footer: React.PropTypes.string,
            siteName: React.PropTypes.string,
            logo: React.PropTypes.string,
            tagline: React.PropTypes.string
        }
    }

    render() {
        return (
            <div>
                {/*TODO Extract as header container.*/}
                <div className="row">
                    <div className="col-lg-offset-1 col-lg-3">
                        <ConnectedUserLogin />
                    </div>
                    <div className="col-lg-offset-5 col-lg-2">
                        <ConnectedThemeSwitchView />
                    </div>
                </div>

                {/*TODO Extract as site header container.*/}
                <div className="row">
                    <SiteHeader siteName={ this.props.siteName } logo={ this.props.logo } tagline={ this.props.tagline } />
                </div>

                {/*TODO Extract as Main body and navigation sidebar containers.*/}
                <div className="row">
                    <div><ConnectedNavigationMenu /></div>
                    <div className="col-lg-8 ice-floe">
                        <div>
                            { this.props.children }
                        </div>
                    </div>
                </div>

                {/*TODO Extract as site footer container.*/}
                <div className="row">
                    <SiteFooter footer={ this.props.footer } />
                </div>
            </div>
        );
    }
}

export const WiredApp = connect(
    (state) => {
        return {
            'footer': state.site.footer,
            'siteName': state.site.name,
            'logo': state.site.logo,
            'tagline': state.site.tagline
        };
    })(App);
