/*
 *    Project Name    : Visual Python
 *    Description     : GUI-based Python code generator
 *    File Name       : Snippets.js
 *    Author          : Black Logic
 *    Note            : Apps > Snippets
 *    License         : GNU GPLv3 with Visual Python special exception
 *    Date            : 2021. 11. 18
 *    Change Date     :
 */

//============================================================================
// [CLASS] Snippets
//============================================================================
define([
    __VP_TEXT_LOADER__('vp_base/html/m_apps/snippets.html'), // INTEGRATION: unified version of text loader
    __VP_CSS_LOADER__('vp_base/css/m_apps/snippets'), // INTEGRATION: unified version of css loader
    'vp_base/js/com/com_util',
    'vp_base/js/com/com_Const',
    'vp_base/js/com/com_String',
    'vp_base/js/com/com_interface',
    'vp_base/js/com/component/PopupComponent',
    'vp_base/js/com/component/FileNavigation',
    'vp_base/js/com/component/LoadingSpinner'
], function(snHtml, snCss, com_util, com_Const, com_String, com_interface, PopupComponent, FileNavigation, LoadingSpinner) {

    /**
     * Snippets
     */
    class Snippets extends PopupComponent {
        _init() {
            super._init();
            /** Write codes executed before rendering */
            this.config.codeview = false;
            this.config.dataview = false;
            this.config.runButton = false;
            this.config.sizeLevel = 3;

            this.state = {
                vp_userCode: '',
                ...this.state
            }

            this.codemirrorList = {};
            this.importedList = [];
            this.title_no = 0;
    
            // double click setter
            this.clicked = 0;

            this.defaultSnippets = {
                'default import': [
                    'import numpy as np',
                    'import pandas as pd',
                    'import matplotlib.pyplot as plt',
                    '%matplotlib inline',
                    'import seaborn as sns',
                    'import plotly.express as px'
                ],
                'matplotlib customizing': [
                    'import matplotlib.pyplot as plt',
                    '%matplotlib inline',
                    '',
                    "plt.rc('figure', figsize=(12, 8))",
                    '',
                    'from matplotlib import rcParams',
                    "rcParams['font.family'] = 'New Gulim'",
                    "rcParams['font.size'] = 10",
                    "rcParams['axes.unicode_minus'] = False"
                ],
                'as_float': [
                    'def as_float(x):',
                    '    """',
                    "    usage: df['col'] = df['col'].apply(as_float)",
                    '    """',
                    '    if not isinstance(x, str):',
                    '        return 0.0',
                    '    else:',
                    '        try:',
                    '            result = float(x)',
                    '            return result',
                    '        except ValueError:',
                    '            return 0.0'
                ],
                'as_int': [
                    'def as_int(x):',
                    '    """',
                    "    usage: df['col'] = df['col'].apply(as_int)",
                    '    """',
                    '    if not isinstance(x, str):',
                    '        return 0',
                    '    else:',
                    '        try:',
                    '            result = int(x)',
                    '            return result',
                    '        except ValueError:',
                    '            return 0.0'
                ]
            }
        }

        _bindEvent() {
            super._bindEvent();
            /** Implement binding events */
            let that = this;
            // menu popup
            $(this.wrapSelector('.vp-sn-menu')).on('click', function(evt) {
                evt.stopPropagation();
                $(that.wrapSelector('.vp-sn-menu-box')).toggle();
            });

            // sort menu popup
            $(this.wrapSelector('.vp-sn-sort')).on('click', function(evt) {
                evt.stopPropagation();
                $(that.wrapSelector('.vp-sn-sort-menu-box')).toggle();
            });

            // menu click 
            $(this.wrapSelector('.vp-sn-menu-item')).on('click', async function(evt) {
                var menu = $(this).data('menu');
                if (menu == 'import') {
                    let fileNavi = new FileNavigation({
                        type: 'open',
                        extensions: ['sn'],
                        finish: function(filesPath, status, error) {
                            // import sn file
                            filesPath.forEach(fileObj => {
                                var fileName = fileObj.file;
                                var selectedPath = fileObj.path;
                                if (vpConfig.extensionType === 'lab' || vpConfig.extensionType === 'lite') {
                                    vpKernel.readFile(selectedPath).then(function(resultObj) {
                                        try {
                                            var snippetData = JSON.parse(resultObj.result);
                                            var timestamp = new Date().getTime();
        
                                            var keys = Object.keys(snippetData);
                                            var importKeys = [];
                                            var newSnippet = {};
                                            keys.forEach(key => {
                                                var importKey = key;
                                                var importNo = 1;
                                                var titleList = Object.keys(that.codemirrorList);
                                                // set duplicate title
                                                while(titleList.includes(importKey)) {
                                                    importKey = key + '_imported' + importNo;
                                                    importNo += 1;
                                                }
                                                newSnippet = { ...newSnippet, [importKey]: { code: snippetData[key], timestamp: timestamp } };
        
                                                importKeys.push(importKey);
                                            });
                                            vpConfig.setData(newSnippet).then(function() {
                                                that.importedList = [ ...importKeys ];
                                                that.loadUdfList();
                                                com_util.renderSuccessMessage(fileName + ' imported ');
                                            });
                                        } catch (ex) {
                                            com_util.renderAlertModal('Not applicable file contents with vp format! (JSON)');
                                        }
                                    }).catch(function(err) {
                                        vpLog.display(VP_LOG_TYPE.ERROR, err);
                                    });
                                } else {
                                    fetch(selectedPath).then(function(file) {
                                    if (file.status != 200) {
                                        alert("The file format is not valid.");
                                        return;
                                    }
                            
                                    file.text().then(function(data) {
                                        var snippetData = JSON.parse(data);
                                        var timestamp = new Date().getTime();
    
                                        var keys = Object.keys(snippetData);
                                        var importKeys = [];
                                        keys.forEach(key => {
                                            var importKey = key;
                                            var importNo = 1;
                                            var titleList = Object.keys(that.codemirrorList);
                                            // set duplicate title
                                            while(titleList.includes(importKey)) {
                                                importKey = key + '_imported' + importNo;
                                                importNo += 1;
                                            }
                                            var newSnippet = { [importKey]: { code: snippetData[key], timestamp: timestamp } };
                                            vpConfig.setData(newSnippet);
    
                                            importKeys.push(importKey);
                                        });
                                        that.importedList = [ ...importKeys ];
    
                                        that.loadUdfList();
    
                                        com_util.renderSuccessMessage(fileName + ' imported ');
                                    });
                                });
                                }
                                
                            });
                            
                        }
                    });
                    fileNavi.open();
                } else if (menu == 'export') {
                    // set as export mode
                    $(that.wrapSelector()).addClass('vp-sn-export-mode');

                    // check all
                    $(that.wrapSelector('.vp-sn-check-all')).prop('checked', true);
                    $(that.wrapSelector('.vp-sn-item-check')).prop('checked', true);
                } else if (menu == 'default-snippets') {
                    // import default snippets
                    let loadingSpinner = new LoadingSpinner($(that.wrapSelector('.vp-sn-table')));
                    var timestamp = new Date().getTime();
                    var keys = Object.keys(that.defaultSnippets);
                    var importKeys = [];
                    var newSnippet = {};
                    keys.forEach(key => {
                        var importKey = key;
                        var importNo = 1;
                        var titleList = Object.keys(that.codemirrorList);
                        // set duplicate title
                        while(titleList.includes(importKey)) {
                            importKey = key + '_imported' + importNo;
                            importNo += 1;
                        }
                        var code = that.defaultSnippets[key].join('\n');
                        newSnippet = { ...newSnippet, [importKey]: { code: code, timestamp: timestamp } };
                        importKeys.push(importKey);
                    });

                    vpConfig.setData(newSnippet).then(function() {
                        that.importedList = [ ...importKeys ];
                        that.loadUdfList();
                        com_util.renderSuccessMessage('Default snippets imported');
                    }).finally(function() {
                        loadingSpinner.remove();
                    });
                }
                $(that.wrapSelector('.vp-sn-menu-box')).hide();
                evt.stopPropagation();
            });

            // search item 
            $(this.wrapSelector('.vp-sn-search')).on('change', function(evt) {
                var value = $(this).val();
                if (value != '') {
                    $(that.wrapSelector('.vp-sn-item')).hide();
                    $(that.wrapSelector('.vp-sn-item')).filter(function() {
                        return $(this).data('title').search(value) >= 0;
                    }).show();
                } else {
                    $(that.wrapSelector('.vp-sn-item')).show();
                }
            });

            // sort item
            $(this.wrapSelector('.vp-sn-sort-menu-item')).on('click', function() {
                var menu = $(this).data('menu');
                if (menu == 'name') {
                    // sort by name
                    $(that.wrapSelector('.vp-sn-item')).sort(function(a, b) {
                        var titleA = $(a).data('title');
                        var titleB = $(b).data('title');
                        return titleA > titleB ? 1 : -1
                    }).appendTo($(that.wrapSelector('.vp-sn-table')))
                } else if (menu == 'date') {
                    // sort by date
                    $(that.wrapSelector('.vp-sn-item')).sort(function(a, b) {
                        var timeA = $(a).data('timestamp');
                        var timeB = $(b).data('timestamp');
                        return timeA < timeB ? 1 : -1
                    }).appendTo($(that.wrapSelector('.vp-sn-table')))
                }
            });

            // create item
            $(this.wrapSelector('.vp-sn-create')).on('click', function() {
                var titleList = Object.keys(that.codemirrorList);
                var newTitle = 'untitled' + that.title_no;
                while(titleList.includes(newTitle)) {
                    that.title_no += 1;
                    newTitle = 'untitled' + that.title_no;
                }

                var timestamp = new Date().getTime();
                var newItem = $(that.renderSnippetItem(newTitle, '', timestamp));
                $(that.wrapSelector('.vp-sn-table')).append(newItem);
                // bind snippet item
                that.bindSnippetItem();

                // save it
                var newSnippet = { [newTitle]: { code: '', timestamp: timestamp } };
                vpConfig.setData(newSnippet);

                var tag = $(that.wrapSelector('.vp-sn-item[data-title="' + newTitle + '"] textarea'));
                that.bindCodeMirror(newTitle, tag[0]);
                $(newItem).find('.vp-sn-indicator').trigger('click');

                that.title_no += 1;
            });
            

            //////////////// export mode ///////////////////////
            // check all
            $(this.wrapSelector('.vp-sn-check-all')).on('change', function() {
                var checked = $(this).prop('checked');
                $(that.wrapSelector('.vp-sn-item-check')).prop('checked', checked);
            });

            // export snippets
            $(this.wrapSelector('.vp-sn-export')).on('click', async function() {
                var menu = $(this).data('menu');
                if (menu == 'cancel') {
                    // cancel
                    // return to default mode
                    $(that.wrapSelector()).removeClass('vp-sn-export-mode');
                } else if (menu == 'export') {
                    var checked = $(that.wrapSelector('.vp-sn-item-check:checked'));
                    if (checked.length <= 0) {
                        return ;
                    }
        
                    let fileNavi = new FileNavigation({
                        type: 'save',
                        extensions: ['sn'],
                        finish: function(filesPath, status, error) {
                            let fileObj = filesPath[0];
                            var fileName = fileObj.file;
                            var selectedPath = fileObj.path;
            
                            // get checked snippets
                            var snippets = {};
                            $(that.wrapSelector('.vp-sn-item-check:checked')).each((idx, tag) => {
                                var title = $(tag).closest('.vp-sn-item').data('title');
                                var codemirror = that.codemirrorList[title];
                                codemirror.save();
                                var code = codemirror.getValue();
                                snippets[title] = code;
                            }); 
            
                            // make as file
                            var fileData = JSON.stringify(snippets);
                            vpKernel.saveFile(fileName, selectedPath, fileData);

                            // return to default mode
                            $(that.wrapSelector()).removeClass('vp-sn-export-mode');
                        }
                    });
                    fileNavi.open();
                }

            });
        }

        bindSnippetItem() {
            let that = this;
            // item header click (select item) &  double click (edit title)
            $(this.wrapSelector('.vp-sn-item-header')).off('click');
            $(this.wrapSelector('.vp-sn-item-header')).on('click', function(evt) {
                // stop propagation on checkbox
                if ($(evt.target).hasClass('vp-sn-item-check')) {
                    return;
                }

                var thisHeader = this;
                that.clicked++;
                if (that.clicked == 1) {
                    setTimeout(function(){
                        let selected = $(thisHeader).hasClass('selected');
                        if(selected || that.clicked > 1) {
                            // double click or clicked after selection
                            // enable input
                            $(thisHeader).find('.vp-sn-item-title').prop('readonly', false);
                            $(thisHeader).find('.vp-sn-item-title').select();
                            $(thisHeader).find('.vp-sn-item-title').focus();

                        } 
                        // single click
                        // select item
                        // remove selection
                        $(that.wrapSelector('.vp-sn-item-header')).removeClass('selected');
                        // select item
                        $(thisHeader).addClass('selected');
                        that.clicked = 0;
                    }, 200);
                }
                evt.stopPropagation();
            });

            // item indicator click (toggle item)
            $(this.wrapSelector('.vp-sn-indicator')).off('click');
            $(this.wrapSelector('.vp-sn-indicator')).on('click', function(evt) {
                // toggle item
                var parent = $(this).parent().parent();
                var indicator = $(this);
                var hasOpen = $(indicator).hasClass('open');
                // Deprecated: hide all codebox
                // $(that.wrapSelector('.vp-sn-indicator')).removeClass('open');
                // $(that.wrapSelector('.vp-sn-item-code')).hide();
                
                if (!hasOpen) {
                    // show code
                    $(indicator).addClass('open');
                    $(parent).find('.vp-sn-item-code').show();
                } else {
                    // hide code
                    $(indicator).removeClass('open');
                    $(parent).find('.vp-sn-item-code').hide();
                }
            });

            // prevent occuring header click event by clicking input
            $(this.wrapSelector('.vp-sn-item-title')).off('click');
            $(this.wrapSelector('.vp-sn-item-title')).on('click', function(evt) {
                // evt.stopPropagation();
            });

            // item title save
            $(this.wrapSelector('.vp-sn-item-title')).off('blur');
            $(this.wrapSelector('.vp-sn-item-title')).on('blur', function(evt) {
                var prevTitle = $(this).closest('.vp-sn-item').data('title');
                var inputTitle = $(this).val();
                var $thisItem = $(this);

                if (prevTitle == inputTitle) {
                    ;
                } else {
                    // check duplicated
                    var titleList = Object.keys(that.codemirrorList);
                    var newTitle = inputTitle;
                    var dupNo = 0
                    while(titleList.includes(newTitle)) {
                        dupNo += 1;
                        newTitle = inputTitle + '_' + dupNo;
                    }

                    let cmCode = that.codemirrorList[prevTitle];
                    if (cmCode) {
                        cmCode.save();
                        var code = cmCode.getValue();
                        // Remove original title
                        vpConfig.removeData(prevTitle).then(function() {
                            // Save data with new title
                            // save udf
                            var newTimestamp = new Date().getTime();
                            var newSnippet = { [newTitle]: { code: code, timestamp: newTimestamp } };
                            vpConfig.setData(newSnippet);

                            // update title & codemirror
                            $thisItem.closest('.vp-sn-item-title').val(newTitle);
                            $thisItem.closest('.vp-sn-item').data('title', newTitle);
                            // update codemirror
                            that.codemirrorList[newTitle] = that.codemirrorList[prevTitle];
                            delete that.codemirrorList[prevTitle];
                        });
                    }
                }

                // disable
                $(this).prop('readonly', true);
            });

            // item menu click
            $(this.wrapSelector('.vp-sn-item-menu-item')).off('click');
            $(this.wrapSelector('.vp-sn-item-menu-item')).on('click', function(evt) {
                var menu = $(this).data('menu');
                var item = $(this).closest('.vp-sn-item');
                var title = $(item).data('title');
                if (menu == 'run') {
                    // get codemirror
                    let cmCode = that.codemirrorList[title];
                    cmCode.save();
                    var code = cmCode.getValue();
                    // DEPRECATED: no longer save to block as default
                    // create block and run it
                    // $('#vp_wrapper').trigger({
                    //     type: 'create_option_page', 
                    //     blockType: 'block',
                    //     menuId: 'lgExe_code',
                    //     menuState: { taskState: { code: code } },
                    //     afterAction: 'run'
                    // });
                    com_interface.insertCell('code', code, true, 'Data Analysis > Snippets');
                } else if (menu == 'duplicate') {
                    var dupNo = 1;
                    var timestamp = new Date().getTime();
                    var dupTitle = title + '_dup' + dupNo;
                    var titleList = Object.keys(that.codemirrorList);
                    // set duplicate title
                    while(titleList.includes(dupTitle)) {
                        dupNo += 1;
                        dupTitle = title + '_dup' + dupNo;
                    }

                    // add duplicated one
                    var code = that.codemirrorList[title].getValue();

                    var dupItem = $(that.renderSnippetItem(dupTitle, code, timestamp));
                    $(that.wrapSelector('.vp-sn-table')).append(dupItem);
                    // bind snippet item
                    that.bindSnippetItem();

                    // save it
                    var dupSnippet = { [dupTitle]: { code: code, timestamp: timestamp } };
                    vpConfig.setData(dupSnippet);

                    var tag = $(that.wrapSelector('.vp-sn-item[data-title="' + dupTitle + '"] textarea'));
                    that.bindCodeMirror(dupTitle, tag[0]);
                    $(dupItem).find('.vp-sn-indicator').trigger('click');

                } else if (menu == 'delete') {
                    let loadingSpinner = new LoadingSpinner($(that.wrapSelector('.vp-sn-table')));
                    // remove key
                    if (vpConfig.extensionType === 'lab' || vpConfig.extensionType === 'lite') {
                        vpConfig.getData('').then(function(data) {
                            let dataObj = data;
                            // remove data
                            delete dataObj[title];
                            vpConfig._writeToLab(dataObj).then(function() {
                                delete that.codemirrorList[title];
                                // remove item
                                $(that.wrapSelector('.vp-sn-item[data-title="' + title + '"]')).remove();
        
                                // vp-multilang for success message
                                com_util.renderSuccessMessage('Successfully removed!');
                            }).catch(function(err) {
                                com_util.renderAlertModal('Failed to remove data...', { content: err });
                                // load again
                                that.loadUdfList();
                            }).finally(function() {
                                loadingSpinner.remove();
                            });
                        }).catch(function(err) {

                        })
                    } else {
                        vpConfig.removeData(title).then(function() {
                            delete that.codemirrorList[title];
                            // remove item
                            $(that.wrapSelector('.vp-sn-item[data-title="' + title + '"]')).remove();
    
                            // vp-multilang for success message
                            com_util.renderSuccessMessage('Successfully removed!');
                        }).catch(function(err) {
                            com_util.renderAlertModal('Failed to remove data...', { content: err });
                            // load again
                            that.loadUdfList();
                        }).finally(function() {
                            loadingSpinner.remove();
                        });
                    }
                    
                } else if (menu == 'save') {
                    if (!$(this).hasClass('vp-disable')) {
                        var codemirror = that.codemirrorList[title];
                        codemirror.save();
                        var code = codemirror.getValue();
                        
                        // save changed code
                        var timestamp = new Date().getTime();
                        var updateSnippet = { [title]: { code: code, timestamp: timestamp } };
                        vpConfig.setData(updateSnippet);
    
                        // disable it
                        $(this).addClass('vp-disable');
                    }
                }
                evt.stopPropagation();
            });

            // check items
            $(this.wrapSelector('.vp-sn-item-check')).off('change');
            $(this.wrapSelector('.vp-sn-item-check')).on('change', function() {
                var checked = $(this).prop('checked');
                // if unchecked at least one item, uncheck check-all
                if (!checked) {
                    $(that.wrapSelector('.vp-sn-check-all')).prop('checked', false);
                } else {
                    // if all checked, check check-all
                    var allLength = $(that.wrapSelector('.vp-sn-item-check')).length;
                    var checkedLength = $(that.wrapSelector('.vp-sn-item-check:checked')).length;
                    if (allLength == checkedLength) {
                        $(that.wrapSelector('.vp-sn-check-all')).prop('checked', true);
                    }
                }
            });
        }

        bindCodeMirror(title, selector) {
            let cmCode = this.initCodemirror({
                key: title,
                selector: selector,
                type: 'code',
                events: [{ 
                    key: 'change',
                    callback: function(evt, chgObj) {
                        if (chgObj.removed.join('') != '' || chgObj.text.join('') != '') {
                            // enable save button
                            $(selector).parent().find('.vp-sn-save').removeClass('vp-disable');
                        }
                    }
                }]
            });
            this.codemirrorList[title] = cmCode;
        }

        templateForBody() {
            return snHtml;
        }

        render() {
            super.render();

            // load udf list
            this.loadUdfList();
        }

        renderSnippetItem(title, code, timestamp, hasImported=false) {
            var item = new com_String();
            item.appendFormatLine('<div class="{0}" data-title="{1}" data-timestamp="{2}">', 'vp-sn-item', title, timestamp);
            item.appendFormatLine('<div class="{0}">', 'vp-sn-item-header');
            item.appendFormatLine('<div class="{0}"></div>', 'vp-sn-indicator');
            item.appendFormatLine('<input type="text" class="vp-input {0}" value="{1}" readonly/>', 'vp-sn-item-title', title);
            if (hasImported) {
                item.appendFormatLine('<i class="{0}"></i>', 'fa fa-circle vp-sn-imported-item');
            }
            item.appendFormatLine('<div class="{0}">', 'vp-sn-item-menu');
            // LAB: img to url
            item.appendFormatLine('<div class="{0}" data-menu="{1}" title="{2}">'
                                , 'vp-sn-item-menu-item vp-icon-run', 'run', 'Run');
            // item.appendFormatLine('<img src="{0}"/>', com_Const.IMAGE_PATH + 'snippets/run.svg');
            item.appendLine('</div>');
            // LAB: img to url
            item.appendFormatLine('<div class="{0}" data-menu="{1}" title="{2}">'
                                , 'vp-sn-item-menu-item vp-icon-duplicate', 'duplicate', 'Duplicate');
            // item.appendFormatLine('<img src="{0}"/>', com_Const.IMAGE_PATH + 'snippets/duplicate.svg');
            item.appendLine('</div>');
            // LAB: img to url
            item.appendFormatLine('<div class="{0}" data-menu="{1}" title="{2}">'
                                , 'vp-sn-item-menu-item vp-icon-delete', 'delete', 'Delete');
            // item.appendFormatLine('<img src="{0}"/>', com_Const.IMAGE_PATH + 'delete.svg');
            item.appendLine('</div>'); 
            item.appendLine('</div>'); // end of vp-sn-item-menu
            // export mode checkbox
            item.appendFormatLine('<input type="checkbox" class="{0} {1}"/>', 'vp-sn-checkbox', 'vp-sn-item-check');
            item.appendLine('</div>'); // end of vp-sn-item-header
            item.appendFormatLine('<div class="{0}">', 'vp-sn-item-code');
            item.appendFormatLine('<textarea>{0}</textarea>', code);
            // LAB: img to url
            item.appendFormatLine('<div class="{0} {1} vp-icon-save vp-disable" data-menu="{2}" title="{3}">', 'vp-sn-item-menu-item', 'vp-sn-save', 'save', 'Save changes');
            // item.appendFormatLine('<img src="{0}"/>', com_Const.IMAGE_PATH + 'snippets/save_orange.svg');
            item.appendLine('</div>'); // vp-sn-save
            item.appendLine('</div>'); // end of vp-sn-item-code
            item.appendLine('</div>'); // end of vp-sn-item
            return item.toString();
        }

        generateCode() {
            return '';
        }

        loadUdfList() {
            var that = this;

            // clear table except head
            $(this.wrapSelector('.vp-sn-table')).html('');

            // load udf list to table 'vp_udfList'
            let loadingSpinner = new LoadingSpinner($(this.wrapSelector('.vp-sn-table')));
            vpConfig.getData().then(function(udfObj) {
                vpLog.display(VP_LOG_TYPE.DEVELOP, 'Snippets get data', udfObj);
                var snippets = new com_String();
                if (udfObj !== undefined) {
                    Object.keys(udfObj).forEach(key => {
                        let obj = udfObj[key];
                        if (obj.code != null && obj.code != undefined) {
        
                            var hasImported = false;
                            if (that.importedList.includes(key)) {
                                // set new label
                                hasImported = true;
                            }
                            var item = that.renderSnippetItem(key, obj.code, obj.timestamp, hasImported);
                            snippets.append(item);
                        }
                    });
                }
                $(that.wrapSelector('.vp-sn-table')).html(snippets.toString());

                // bind snippet item
                that.bindSnippetItem();
    
                // load codemirror
                var codeList = $(that.wrapSelector('.vp-sn-item-code textarea'));
                codeList.each((idx, tag) => {
                    var title = $(tag).closest('.vp-sn-item').data('title');
                    that.bindCodeMirror(title, tag);
                });
            }).catch(function(err) {
                // com_util.renderAlertModal(err);
                vpLog.display(VP_LOG_TYPE.ERROR, err);
            }).finally(function() {
                loadingSpinner.remove();
            });
        }

    }

    return Snippets;
});