var ContentModule = React.createClass({
    requestServerList: function() {
        var _this = this;
        fetch('/spaceport/servers.json')
            .then(function(response) {
                response.json().then(function(data) {
                    console.debug(data);
                    _this.setState({serverList: data})
                });
            })
            .catch(function(err){
                console.error(err);
            });
    },
    convertToChart: function(pingList) {
        var resultArray = [];
        pingList.forEach(function(pingData){
            resultArray.push({x: pingData.time, y: pingData.online})
        });
        return resultArray;
    },
    clickServerListItem: function(title) {
        var _this = this;
        fetch('/spaceport/servers.json?clientid='+title)
            .then(function(response){
                response.json().then(function(data){
                    console.debug(data);
                    _this.refs.serverInfo.setState({
                        title: data.name,
                        data: _this.convertToChart(data.pingList)
                    });
                });
            })
            .catch(function(err){
                console.error(err);
            });
    },
    /*--------------------*/
    getInitialState: function(){return{
        nvScriptReady: 0,
        serverList: []
    }},
    componentWillMount: function(){
        var _this = this;

        loadScript("/spaceport/components.js",
            function(){ _this.setState({nvScriptReady: _this.state.nvScriptReady+1}); console.debug('components - ok'); },
            function(){ _this.setState({nvScriptReady: -5}); console.debug('components - error'); }
        );

        loadScript("https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js",
            function(){
                _this.setState({nvScriptReady: _this.state.nvScriptReady+1}); console.info('d3 - ok');
                loadStyle("https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.min.css");
                loadScript("https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.js",
                    function(){ _this.setState({nvScriptReady: _this.state.nvScriptReady+1}); console.info('nv - ok'); },
                    function(){ _this.setState({nvScriptReady: -5}); console.error('nv - error'); }
                );
            },
            function(){ _this.setState({nvScriptReady: -5}); console.error('d3 - error'); }
        );

        loadScript("/spaceport/ansi_up.js",
            function(){ console.debug('ansi_up - ok'); },
            function(){ console.debug('ansi_up - error'); }
        );

        loadStyle("/spaceport/moduleStyle.css");

        this.requestServerList();
    },
    render: function(){
        var element;
        if (this.state.nvScriptReady === 3) {
            var _this = this;
            var serverListItems = [];
            this.state.serverList.forEach(function(item){
                serverListItems.push(ce(ServerListItem, {title: item, onClick: _this.clickServerListItem.bind(_this, item)}));
            });

            element = ce('div', {className: 'row'},
                          ce('div', {className: 'col-md-3'}, ce(ServerList, null, serverListItems)),
                          ce('div', {className: 'col-md-9'}, ce(ServerInfo, {ref: "serverInfo"}))
                      );
        } else if (this.state.nvScriptReady < 0) {
            element = ce('span', null, 'error');
        } else {
            element = ce('span', null, 'loading...');
        }

        return(
            ce(Panel, {title: 'Серверы'}, element)
        )
    }
});