/**
 * График.
 * <code>this.props.datum</code> - данные в формате D3
 */
var NvLineChart = React.createClass({
    chart: null,
    d3ChartData: null,
    /*--------------------*/
    render: function(){return(
        ce('div', {id: 'chart'}, ce('svg', {style: {'height': '500px'}}))
    )},
    componentDidMount: function() {
        var _this = this;
        nv.addGraph(function() {
            _this.chart = nv.models.lineChart().useInteractiveGuideline(true);
            _this.chart.xAxis.axisLabel('Time').tickFormat(function(d){ return d3.time.format('%X')(new Date(d)); });
            _this.chart.yAxis.axisLabel('Players').tickFormat(d3.format('d'));

            _this.d3ChartData = d3.select('#chart svg').datum(_this.props.datum);
            _this.d3ChartData.transition().duration(500).call(_this.chart);

            nv.utils.windowResize(_this.chart.update);
            return _this.chart;
        });
    },
    componentDidUpdate: function() {
        if (this.d3ChartData === null) return;

        this.d3ChartData.datum(this.props.datum);
        this.d3ChartData.transition().duration(500).call(this.chart);
        nv.utils.windowResize(this.chart.update);
    }
});

var Tabs = React.createClass({
    render: function(){
        var tabsElm = [];
        this.props.tabs.forEach(function(title, i){
            tabsElm.push(ce('li', (i === 0 ? {className: 'active'} : null), ce('a', {href: '#'}, title)));
        });

        return(
            ce('ul', {className: 'nav nav-tabs'}, tabsElm)
        )
    }
});

var ServerInfo = React.createClass({
    getInitialState: function(){return {
        title: null,
        data: []
    }},
    render: function(){
        if (this.state.title === null) {
            return ce('div', null, 'no data');
        } else {
            return(
                ce('div', null,
                    ce('h2', {style: {'margin-top': '0px'}}, this.state.title),
                    ce(Tabs, {tabs: ['Онлайн1', 'Консоль2']}),
                    ce(NvLineChart, {datum: [{
                        key: 'Online players',
                        color: '#37d668',
                        area: true,
                        values: this.state.data
                    }]})
                )
            )
        }
    }
});

/**
 * Пункт списка серверов.
 * <code>this.props.title</code> - заголовок / clientId
 * <code>this.props.onClick</code> - callback события клика
 * <code>this.props.active</code> - состояние активности (true/false)
 */
var ServerListItem = React.createClass({
    render: function(){
        return(
            ce('a', {className: 'list-group-item clearfix' + (this.props.active ? ' active' : ''), href: '#',
                     onClick: this.props.onClick},
                ce('span', {style: {'padding-top': '15px'}},
                    ce('span', {className: 'glyphicon glyphicon-tasks'}),
                    nbsp,
                    this.props.title
                )
            )
        )
    }
});

var ServerList = React.createClass({
    render: function(){return(
        ce('div', {className: 'list-group'}, this.props.children)
    )}
});