var monitor = {render:{},context:'',get:{}}
monitor.render.table_list = function (_data){
    var nodes = jx.dom.get.instance('DIV')
    _data.data.forEach(_item=>{
        var _div = jx.dom.get.instance('DIV')
        _div.innerHTML = _item.name
        _div.className = 'active'
        _div._data = _item.name
        //
        // bind the nodes to an event
        _div.onclick = function (){
            monitor.get(this._data)
        }
        nodes.appendChild(_div)
    })

    //
    // adding the nodes to 
    jx.dom.set.value('table.info',_data.about)
    jx.dom.set.value('tables','')
    jx.dom.append('tables',nodes)
    nodes.childNodes[0].click()
}

monitor.render.data = function(_data){
    
    jx.dom.set.value('dashboard','' )
    _apex = []
    
    Object.keys(_data).forEach(_key=>{
        
        _board = jx.dom.get.instance('DIV')
        _item = _data[_key]
        
        _pane = jx.dom.get.instance('DIV')
        // _pane.className = 'border border-round'
        _item.forEach(_entry=>{
            //-- _entry is the context of a set of charts ...
            
            var _id = Object.keys(_entry)[0]
            _itemPane = jx.dom.get.instance('DIV')
            _frame = jx.dom.get.instance('DIV')
            
            // _itemPane.innerHTML = '<h3>'+_id+'</h3>',_entry[_id]
            //
            // Making title ....
            var _titleDiv = $('<div class="board-title"><div class="large-text">:title</div><div class="small">:about</div></div>'.replace(/:title/,_id).replace(/:about/,_entry[_id].about))
            
            // $(_itemPane).append(_titleDiv)
            $(_frame).append(_titleDiv)
            _itemPane.className = _entry[_id].css 
            _entry[_id].charts.forEach(_chartItem=>{
                if (_chartItem.type == 'scalar') {
                    _chart = jx.dom.get.instance('DIV')
                    _chart.className = 'scalar-pane'
                    // _scalar = $(_options.chart) //-- html objets converted via jquery
                    // console.log()
                    _chart.innerHTML = _chartItem.html
                }else{
                    var _chart = jx.dom.get.instance('DIV')
                    _chart.className = 'chart '+_chartItem.type                   
                    _apex.push(new ApexCharts(_chart,_chartItem.options))
                    
                    
                }
                _itemPane.appendChild(_chart)

            })
            _frame.appendChild(_itemPane)
            _frame.className = 'basic-board'
            // _itemPane.className = 'board-' + _itemPane.childNodes.length
            // _itemPane.className = 'board-' + _itemPane.childNodes.length
            jx.dom.append('dashboard',_frame)    
        //     var _options = _item[_id]
            
        })
        
   

    })
    _apex.forEach(_chart=>{ _chart.render()})
}
monitor.get.scalar = function(_options){
   return $(_options.charts)
}
monitor.render.scalar = function (_data){
    var _pane = jx.dom.get.instance('DIV')
    // _pane.className = 'scalar-pane'
    
       
    var _nodes = []
    Object.keys(_data.values).forEach(_key=>{
        var _div = jx.dom.get.instance('DIV')
        var _value = jx.dom.get.instance('DIV')
        _value.innerHTML = _data.values[_key]

        var _label = jx.dom.get.instance('DIV')
        _label.innerHTML = _key

        // _div.className = 'scalar border-round border'
        _value.className  = 'value'
        _label.className = 'label'
        _div.appendChild(_value)
        _div.appendChild(_label)
       
        // _pane.appendChild(_div)
        _nodes.push(_div)
       
    })
    return _nodes
}
monitor.render.grid = function (_data){
    var pane = jx.dom.get.instance('TABLE')
    var header=jx.dom.get.instance('TR')
    pane.appendChild(header)
    columns = {}
    _data.forEach(_row=>{
        var rowItem = jx.dom.get.instance('TR')
        
        Object.keys(_row).forEach(_col =>{
            
            if(columns[_col] == null){
                columns[_col] = jx.dom.get.instance('TD')
                // columns[_col].className = 'bold border-bottom'
                columns[_col].innerHTML = _col
            }
            var _value = _row[_col]
            _div = jx.dom.get.instance('TD')
            _div.innerHTML = _value
            rowItem.appendChild(_div)
        })
        pane.appendChild(rowItem)
    })
    //
    //
    Object.keys(columns).forEach(_key=>{
        header.appendChild(columns[_key])
    })
    pane.className = 'data-grid border-round border'
    
    return pane
}
monitor.init = function (_context){
    
    var _uri = '/api/logger/init'
    if (_context ){
        monitor.context = _context
        _uri = _context + _uri
    }

    var http = HttpClient.instance()
    http.post(_uri,function (x){
        if (x.readyState == 4 && x.status == 200){
            tables = JSON.parse(x.responseText)
            monitor.render.table_list (tables)
        }else{
            //
            // gracefully handle this ....
        }
        
    })
}

monitor.get = function(table){
    var uri = monitor.context+'/api/logger/read'
    var http = HttpClient.instance()
    http.setData(JSON.stringify({'name':table}))
    http.setHeader('Content-Type','application/json')
    http.post(uri,function(x){
        if(x.status == 200 && x.readyState == 4){
            var _data = JSON.parse(x.responseText)
            
            monitor.render.data(_data)
        }
    })
}

if(!qcms){
    var qcms = {}
}

qcms.dashboard = function(_uri,_id){
    this._uri = _uri
    this._id = _id
    this.get = function (){
        var _uri = this._uri ;
        var http = HttpClient.instance()
        http.setHeader('Content-Type','application/json')
        //http.setData(JSON.stringify(_args))
        var _render = this.render
        var _id = this._id 
        http.post(_uri,function(x){
            if(x.readyState == 4 && x.status == 200){
                var _logs = JSON.parse(x.responseText) 
                _events = []
                _logs.forEach(_item=>{ 

                    var _e = _render(_item,_id) 
                    if (_e != null){
                        _events.push(_e)
                    }
                })
                _events.forEach(_e=>{ _e.render() })
            }
        })
    }
    this.render = function (_item,_id){
        if (! _item.options){
            //
            // This is html to be rendered
            if(_item.constructor.name == 'Array'){
                _item.forEach(_div =>{$(_id).append(_div) })
            }else{
            
                $(_id).append($(_item))
            }
            return null
        }else {
            //
            // rendering apexcharts
            //
            var _divChart = jx.dom.get.instance('DIV')
            _divChart.className = 'chart '+_item.type
            $(_id).append(_divChart)
            var _chart = new ApexCharts(_divChart,_item.options)
            return _chart ;
 
        }
    }
}
