/**
 * @jsx React.DOM
 */
/*jshint quotmark:false */
/*jshint white:false */
/*jshint trailing:false */
/*jshint newcap:false */
/*global React, Router*/

/*
Copyright (c) 2015 - Andreas Dewes

This file is part of Gitboard.

Gitboard is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/

define(["react","js/utils",
        "js/request_notifier",
        "js/components/generic/flash_messages",
        ],
        function (React,
                  Utils,
                  RequestNotifier,
                  FlashMessages
                  ){
        'use'+' strict';

        var RequestIndicator = React.createClass({

            displayName: 'RequestIndicator',

            getInitialState : function(){
                return {hidden : false};
            },

            hideMessage : function(){
                this.setState({hidden : true});
                return false;
            },

            componentWillReceiveProps : function(props){
                if (props.activeRequestCount !== undefined && props.activeRequestCount == 0)
                    this.setState({hidden : false});
            },

            render : function(){
                if (this.props.connectionError == true)
                    return <p className="request-indicator"><A href="" onClick={this.hideMessage}><span className="fa fa-exclamation-triangle" /> Connection problem!</A></p>;
                if (this.props.activeRequestCount > 0 && ! this.state.hidden){
                    return <p className="request-indicator"><A href="" onClick={this.hideMessage}><span className="fa fa-spin fa-refresh" /> syncing...</A></p>;
                }
                else
                    return <span />;
            }
        });

        var Header = React.createClass({

            displayName: 'Header',

            componentWillMount : function(){
                this.requestNotifier = RequestNotifier.getInstance();
                Utils.addRequestNotifier(this.requestNotifier);
            },

            getInitialState : function(){
                return {activeRequestCount : 0};
            },

            componentDidMount : function(){
                this.requestNotifier.subscribe(this.updateStatus);
            },

            componentWillUnmount : function(){
                this.requestNotifier.unsubscribe(this.updateStatus);
            },

            updateStatus : function(subject,property,value){
                if (subject === this.requestNotifier){
                    if (property == 'connectionError'){
                            this.setState({connectionError : true,
                                    willRetryIn : value.requestData.data.retryInterval || 1});
                            setTimeout(function(){
                                this.setState({connectionError : false});
                            }.bind(this),4000 );
                    }
                    if (property === 'activeRequestCount'){
                        setTimeout(function(count){
                            if (this.requestNotifier.activeRequestCount() == count)
                                this.setState({activeRequestCount :count});
                        }.bind(this,value),200);
                    }
                }
            },

            render: function () {
                var FlashMessagesHeader = FlashMessages.FlashMessagesHeader;
                var flashMessagesHeader = <FlashMessagesHeader baseUrl={this.props.baseUrl} params={this.props.params} />;

                var requestIndicator = undefined;

                if (this.state.activeRequestCount > 0 || this.state.connectionError)
                    requestIndicator = <RequestIndicator willRetryIn={this.state.willRetryIn} connectionError={this.state.connectionError} activeRequestCount={this.state.activeRequestCount} baseUrl={this.props.baseUrl} params={this.props.params} data={this.props.data} />;
                return <div className="header">
                    {flashMessagesHeader}
                    {requestIndicator}
                </div>;
            }
        });

        return Header;
});
