var BundleTable = React.createClass({
    render: function(){return(
        ce('table', {className: 'table table-hover', width: '100%', style: {'margin-bottom': '0'}},
            ce('thead', null,
                ce('tr', null,
                    ce('th', {className: 'col-xs-1'}, '#'),
                    ce('th', null, 'Название'),
                    ce('th', {className: 'hidden-xs'}, 'Версия'),
                    ce('th', null, 'Статус'),
                    ce('th', {className: 'col-xs-1'}, nbsp)
                )
            ),
            ce('tbody', null, this.props.children)
        )
    )}
});

var BundleTableRow = React.createClass({
    getInitialState: function(){return{
        id: this.props.id,
        name: this.props.name,
        state: this.props.state,
        version: this.props.version,
        lastModified: this.props.lastModified
    }},
    stateToStr: function(state) {
        if      (state == 1)  {return 'UNINSTALLED'}
        else if (state == 2)  {return 'INSTALLED'}
        else if (state == 4)  {return 'RESOLVED'}
        else if (state == 8)  {return 'STARTING'}
        else if (state == 16) {return 'STOPPING'}
        else if (state == 32) {return 'ACTIVE'}
        else                  {return 'UNKNOW('+state+')'}
    },
    bndUpd: function() {
        var _this = this;
        fetch('/ajax/bundles.json?id='+this.props.id+'&act=upd')
            .then(function(resp){
                resp.json().then(function(data){
                    _this.setState({
                        id: data.id,
                        name: data.name,
                        state: data.state,
                        version: data.version,
                        lastModified: data.lastModified
                    });
                    console.debug(data);
                });
            })
            .catch(function(err){
                console.error(err);
            });
    },
    render: function(){
        vertAlign = {'vertical-align': 'middle'};
        return(
            ce('tr', null,
                ce('td', {style: vertAlign}, this.state.id),
                ce('td', {style: vertAlign}, this.state.name),
                ce('td', {className: 'hidden-xs', style: vertAlign}, this.state.version),
                ce('td', {style: vertAlign}, this.stateToStr(this.state.state)),
                ce('td', {style: vertAlign},
                    ce(Button, {colored: 'danger', btnSize: 'xs', onClick: this.bndUpd}, 'update')
                )
            )
        )
    }
});

var ContentModule = React.createClass({
    tableRows: [],
    getInitialState: function(){return{
        fLoad: true
    }},
    requestBundleList: function() {
        var _this = this;
        fetch('/ajax/bundles.json')
            .then(function(response){
                response.json().then(function(data){
                    console.debug(data);
                    data.forEach(function(bundle){
                        _this.tableRows.push(ce(BundleTableRow, {
                            id: bundle.id,
                            name: bundle.name,
                            state: bundle.state,
                            version: bundle.version,
                            lastModified: bundle.lastModified
                        }));
                    });
                    _this.setState({fLoad: false});
                });
            })
            .catch(function(err){
                console.error(err);
            });
    },
    render:function(){
        if (this.state.fLoad) {
            this.requestBundleList();
            return ce('span', null, 'loading...');
        } else {
            return(ce(Panel, {title: 'Модули'}, ce(BundleTable, null, this.tableRows)))
        }
    }
});