ej.base.registerLicense('ORg4AjUWIQA/Gnt2XFhhQlJHfV5AQmBIYVp/TGpJfl96cVxMZVVBJAtUQF1hTH5VdkxhWnpWcHZcTmhfWkZ/')
var studio = {_context:''}
studio.defaults = {
    'duckdb':'SELECT * \nFROM INFORMATION_SCHEMA.TABLES',
    'sqlite':'SELECT * \nFROM sqlite_master',
    'sqlite3':'SELECT * \nFROM sqlite_master',
    'bigquery':'SELECT * \nFROM <dataset>.INFORMATION_SCHEMA.COLUMNS \nLIMIT 10',
    'postgresql':'SELECT *\nFROM INFORMATION_SCHEMA.COLUMNS LIMIT 10'
}
studio.init = function (_context){
    studio._context = _context
}
studio.dbe = {}
studio.dbe.get = function (){
    var uri = [studio._context,'api/dbe/get']
    uri = uri.join('/')
    var http = HttpClient.instance()
    http.get(uri,function(x){

    })


}

studio.dbe.providers = function (_render){
    var uri = [studio._context,'api/dbe/providers']
    uri = uri.join('/')
    var http = HttpClient.instance()
    http.get(uri,function(x){
        var _data = JSON.parse(x.responseText)
        if (_render){
            _render(_data)
        }

    })
}


studio.dbe.apply = function (label,_query){
    var uri = [studio._context,'api/dbe/apply']
    uri = uri.join('/')
    
    var http = HttpClient.instance()
    _data = {'label':label,'query':_query}
    http.setHeader('Content-Type','application/json')
    http.setData (JSON.stringify(_data))
    http.get(uri,function(x){
        if(x.status == 200 && x.readyState == 4){
            _r = JSON.stringify(x.responseText)
        }else{
            alert(' error round '+x.responseText)
        }
    })

}
studio.grid = function (){
    this.columns = function (_data){
        var _columns = []
        if(_data.columns){
            _data.columns.forEach(_name=>{
                _columns.push({title:_name})
            })
        }
        return _columns
    }
    this.dataTable = function (_id,_data){
       $(_id).html('<table class="display"></table>')
       $(_id.replace(/output/,'status')).hide()
       
        _id = _id + ' table'
        var _columns = []
        if (_data.columns ){
            _data.columns.forEach(_name=>{
                _columns.push({title:_name})
            })
            var _args = {'data':_data.data,'columns':_columns}
            // _args.layout = {topStart:{}}
            _args.buttons = ['excel','pdf']
                
        }else{
            _data = {'data':[],columns:[]}
        }
        _args.dom = 'rtip'
        _args.scrollCollapse = true
        _args.scrollY = '400px'   
        var _grid = new DataTable(_id,_args)     
        return _grid;
    }
    this.gridjs = function (_id, _data){
        $(_id.replace(/output/,'status')).hide()
        var grid = new gridjs.Grid({
            // columns:_data.columns, 
            data:_data.data , //_data.data,
            columns:_data.columns,
            fixedHeader:true, resizable:true,
            search:false,
            
            style:{
                th:{height:'20px',overflow:'hidden','text-overflow':'ellipsis'},
                td :{height:'20px',padding:'4px',overflow:'hidden','text-overflow':'ellipsis'}, 
                table:{overflow:'hidden','text-overflow':'ellipsis','white-space':'nowrap',border:'1px solid transparent'}
            },
            sort:true,
            pagination:true,
            height:'405px'})
        if ($(_id).is(':empty')){
            grid.render($(_id)[0])
        }
            grid.forceRender($(_id)[0])        
    }
    this.spreadsheet = function (_id, _data){
        var _div = $(_id)[0]
        var _columns = this.columns(_data)
       var rows = []
        _data.data.forEach(row=>{
            var _record = {} //-- formatted appropriately
            row.forEach((value,index)=>{
                _col = _data.columns[index].name
                _record[_col] = value
            })
            rows.push(_record)
        })
                
        var _spreadsheet = jspreadsheet(_div, {
            tabs:true,toolbar:false,
            style:['text-overflow: ellipsis; white-space: nowrap;'],
            worksheets: [{
                media:[{type:'chart',options:{}}],
                data: _data.data,
                minDimensions:[20,15],
                tableOverflow:true,
                tableHeight: '400px',
                tableWidth:$(_id).width(),//minSpareCols:'auto',
                columns:_columns,
                workbookname: _id
            }]
        });
        _div.spreadsheet = _spreadsheet
        

        

    }

    this.syncfusion = function(_id,_data){
        
        var rows = []
        
        _data.data.forEach(row=>{
            var _record = {} //-- formatted appropriately
            row.forEach((value,index)=>{
                _col = _data.columns[index]
                _record[_col] = value
            })
            rows.push(_record)
        })

        var spreadsheet = new ej.spreadsheet.Spreadsheet();
        // spreadsheet.allowSave = true
        // spreadsheet.saveUrl = 'api/io/write'
        spreadsheet.sheets = [
            {name:_id.replace(/[#,.]/g,' '),
                ranges:[{dataSource:rows}],
               
            }
        ]
        
        spreadsheet.appendTo(_id)
        $(_id)[0].spreadsheet = spreadsheet
        // console.log([' **** ',(_id+' .e-input-group')])
        // $(_id+' .e-input-group').remove()
        spreadsheet.refresh()
    }
    
}
studio.frame = function (_args){
    this._args = _args
    //
    // Initializing by having an input and ouput pane
    // Load the template from disk
    this.init = function (){

    }

    //
    // Render the template
    this.read = function(_label,_query,_compute){
        var uri = [studio._context,'api/dbe/apply']
        uri = uri.join('/')
        // var _compute = this.compute 
        // $('.'+_label+' .output').html('<i class="fa-solid fa-cog fa-spin"></i> Please wait ...')
        var http = HttpClient.instance()
        
        _data = {'label':_label,'query':_query}
        http.setHeader('Content-Type','application/json')
        http.setData (JSON.stringify(_data))

        http.post(uri,function(x){
            if(x.status == 200 && x.readyState == 4){
                _r = JSON.parse(x.responseText)
                sessionStorage._data = x.responseText
                // console.log(_r)
                _compute(_label,_r)

            }else{
                alert(' error round '+x.responseText)
            }
        })

    }    
    this.render = function (){
        var _args = this._args
        
        var _icon = $('<img>').attr('src',this._args.icon)
        var _label = $('<div class="bold"></div>').html(this._args.label+'<div style="font-weight:lighter; font-size:11px;">'+this._args.provider+'</div>')
        read = this.read
        _compute = this.compute
        _xbutton = $('<div class="border-left"><div class="active apply" align="center"><i class="fa-solid fa-play"></i></div></div>').on('click',function (){
            

            var _id = '.code.'+_args.label.trim()
            _query = $(_id).val()
            
            if (_query.length != ''){
                var _data = read(_args.label,_query,_compute)
                

            }
        })
        var _imgSrc = "api/disk/read?uri=www/html/_assets/images/python.png"
        _imgSrc = studio._context + _imgSrc
        _codeButton = ('<div class="border-left"><div class="active" title="show in code"><i class="fa-solid fa-code"></i></div></div>')
        _wizButton = $('<div class="border-left"><div class="active" title="New Connection"><i class="fa-solid fa-plug-circle-plus" style="color:#4682B4;"></i></div></div>')
        _wizButton.on('click',function(){
            dialog.show({uri:'www/html/wizard.html',title:'Create New Connection',context:studio._context})

        })
        _expandButton = $('<div class="border-left"><div class="active expand"><i class="fa-solid fa-angle-up" title="Expand spreadsheet"></div></div></div>')
        $(_expandButton).attr('label',_args.label)
        $(_expandButton).on('click',function(){
            var _id = '.studio.'+$(this).attr('label') // + ' .expand'
            if ($(_id).html().match(/fa-angle-up/)){
                _icon = '<i class="fa-solid fa-angle-down"></i>'
                _title = "Collapse Spreadsheet"
                $(_id).addClass('studio-expand')
            }else{
                _icon = '<i class="fa-solid fa-angle-up"></i>'
                $(_id).removeClass('studio-expand')
                _title = "Expand Spreadsheet"

            }
            $(_id+' .expand').empty().html(_icon).attr('title',_title)
            var spreadsheet = $(_id+' .output')[0].spreadsheet
            if (spreadsheet != null){
                spreadsheet.refresh()
            }
        })
        
        var _buttons = $('<div style="display:grid; grid-template-columns: auto repeat(4,64px); gap:4px;" align="center"><div>&nbsp;</div></div>')
        _buttons.append(_codeButton,_wizButton,_xbutton,_expandButton)

        // _frame = $('<div class="studio :label"></div>'.replace(/:label/,this._args.label))
        var _frame = $('<div class="studio"></div>') .addClass(this._args.label)
        //
        // Input frame has 2 components (control, textarea)
        _ctrl = $('<div class="border control" align="left"></div>')
        _ctrl.append(_icon,_label,_buttons) //.html(this._args.label))
        _textarea = $('<textarea class="code"></textarea>').addClass(this._args.label).attr('label',_args.label)
        if (studio.defaults[_args.provider] != null){
            _query = studio.defaults[_args.provider]
            $(_textarea).val(_query)
        }
        
        $(_textarea).on('keydown',function (_e){
            if (_e.shiftKey && (_e.keyCode == 13 || _e.key == 'Enter')){
                var _id = $(this).attr('label')
                _id = `.${_id} .apply`
                $(_id).click()
            }
        })
        // _inputframe = $('<div class="input-frame"><div class="ctrl border-round border">.::</div> <textarea class="code"></textarea></div>')
        // _inputframe = $('<div class="input-frame"></div>')
        // _inputframe.append(_ctrl,_textarea)
        // _outputframe = $('<div class="" style="display:grid; grid-template-rows:auto 32px; gap:4px;"><div class="output border-round" ></div><div class="status border"></div></div>')
        _outputframe = $('<div class="output" ></div><div class="status"></div>')
        

        // $(_frame).append(_inputframe, _outputframe)
        $(_frame).append(_ctrl,_textarea,_outputframe)
        $('.studio-pane').append(_frame)

        this.compute()

    }

    this.compute = function (_label,_data){
        _label = (_label != null)?_label: this._args.label
        _id = '.'+_label + ' .output'
        _data = (_data == null)? {'data':[],'columns':[]}: _data ;
        if (_data.data == null){
            _data = {data:[],columns:[]} //{'columns':[],'data':[[]]}
        }
        
        $(_id).empty()
        _gHandler = new studio.grid()
        _gHandler.syncfusion(_id,_data)
        _rows = (_data.data)?_data.data.length : 0
        $('.'+_label + ' .status').html(_rows + ' rows')
        // $(_id).html('<table class="display"></table>')
        // _id = _id + ' table'
        // var _columns = []
        // _args = {}
        // if (_data.columns ){
        //     _data.columns.forEach(_name=>{
        //         _columns.push({title:_name})
        //     })
        //     var _args = {'data':_data.data,'columns':_columns}
        //     // _args.layout = {topStart:{}}
        //     _args.buttons = ['excel','pdf']
            
        // }else{
        //     _data = {'data':[],columns:[]}
        // }
        // _args.dom = 'rtip'
        // _args.scrollCollapse = true
        // _args.scrollY = '300px'
        // new DataTable(_id,_args)
       
    }
}