var ContentModule = React.createClass({
    loadScript: function(url, fnLoad, fnError) {
        const script = document.createElement("script");
        script.src = url;
        script.onload = fnLoad;
        script.onerror = fnError;
        document.body.appendChild(script);
    },
    loadStyle: function(url, fnLoad, fnError) {
        const style = document.createElement("link");
        style.rel = "stylesheet";
        style.href = url;
        style.onload = fnLoad;
        style.onerror = fnError;
        document.body.appendChild(style);
    },
    requestServerList: function() {
        var _this = this;
        fetch('/mcsmanager/servers.json')
            .then(function(response) {
                response.json().then(function(data) {
                    console.debug(data);
                    _this.setState({serverList: data})
                });
            })
            .catch(function(err){
                console.error(err);
            });
    },
    getInitialState: function(){return{
        nvScriptReady: 0,
        serverList: []
    }},
    componentWillMount: function(){
        var _this = this;

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

        this.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');
                _this.loadStyle("https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.min.css");
                _this.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'); }
        );

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

            element = ce('div', {className: 'row'},
                          ce('div', {className: 'col-md-4'}, ce(ServerList, null, serverListItems)),
                          ce('div', {className: 'col-md-8'}, ce(ServerInfo, {title: 'Server 2 [skywars-1]'}, ce(NvLineChart)))
                      );
        } else if (this.state.nvScriptReady < 0) {
            element = ce('span', null, 'error');
        } else {
            element = ce('span', null, 'loading...');
        }

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