/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *  http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
*/
/**
 * Render entity config tab.
 *
 * @type {*}
 */
define([
    "underscore", "jquery", "backbone", "brooklyn-utils", "zeroclipboard", "view/viewutils", 
    "model/config-summary", "text!tpl/apps/config.html", "text!tpl/apps/config-name.html",
    "jquery-datatables", "datatables-extensions"
], function (_, $, Backbone, Util, ZeroClipboard, ViewUtils, ConfigSummary, ConfigHtml, ConfigNameHtml) {

    // TODO consider extracting all such usages to a shared ZeroClipboard wrapper?
    ZeroClipboard.config({ moviePath: './assets/img/zeroclipboard/ZeroClipboard.swf' });

    var configHtml = _.template(ConfigHtml),
        configNameHtml = _.template(ConfigNameHtml);

    // TODO refactor to share code w entity-sensors.js
    // in meantime, see notes there!
    var EntityConfigView = Backbone.View.extend({
        template: configHtml,
        configMetadata:{},
        refreshActive:true,
        zeroClipboard: null,
        
        events:{
            'click .refresh':'updateConfigNow',
            'click .filterEmpty':'toggleFilterEmpty',
            'click .toggleAutoRefresh':'toggleAutoRefresh',
            'click #config-table div.secret-info':'toggleSecrecyVisibility',

            'mouseup .valueOpen':'valueOpen',
            'mouseover #config-table tbody tr':'noteFloatMenuActive',
            'mouseout #config-table tbody tr':'noteFloatMenuSeemsInactive',
            'mouseover .floatGroup':'noteFloatMenuActive',
            'mouseout .floatGroup':'noteFloatMenuSeemsInactive',
            'mouseover .clipboard-item':'noteFloatMenuActiveCI',
            'mouseout .clipboard-item':'noteFloatMenuSeemsInactiveCI',
            'mouseover .hasFloatLeft':'showFloatLeft',
            'mouseover .hasFloatDown':'enterFloatDown',
            'mouseout .hasFloatDown':'exitFloatDown',
            'mouseup .light-popup-menu-item':'closeFloatMenuNow',
        },
        
        initialize:function () {
            _.bindAll(this);
            this.$el.html(this.template());
            
            var that = this,
                $table = this.$('#config-table');
            that.table = ViewUtils.myDataTable($table, {
                "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
                    $(nRow).attr('id', aData[0]);
                    $('td',nRow).each(function(i,v){
                        if (i==1) $(v).attr('class','config-value');
                    });
                    return nRow;
                },
                "aoColumnDefs": [
                                 { // name (with tooltip)
                                     "mRender": function ( data, type, row ) {
                                         // name (column 1) should have tooltip title
                                         var actions = that.getConfigActions(data.name);
                                         // if data.description or .type is absent we get an error in html rendering (js)
                                         // unless we set it explicitly (there is probably a nicer way to do this however?)
                                         var context = _.extend(data, { 
                                             description: data['description'], type: data['type']});
                                         return configNameHtml(context);
                                     },
                                     "aTargets": [ 1 ]
                                 },
                                 { // value
                                     "mRender": function ( data, type, row ) {
                                         var escapedValue = Util.toDisplayString(data);
                                         if (type!='display')
                                             return escapedValue;
                                         
                                         var hasEscapedValue = (escapedValue!=null && (""+escapedValue).length > 0);
                                             configName = row[0],
                                             actions = that.getConfigActions(configName);
                                         
                                         // NB: the row might not yet exist
                                         var $row = $('tr[id="'+_.escape(configName)+'"]');
                                         
                                         // datatables doesn't seem to expose any way to modify the html in place for a cell,
                                         // so we rebuild
                                         
                                         var result = "<span class='value'>"+(hasEscapedValue ? escapedValue : '')+"</span>";
                                         
                                         var isSecret = Util.isSecret(configName);
                                         if (isSecret) {
                                            result += "<span class='secret-indicator'>(hidden)</span>";
                                         }
                                         
                                         if (actions.open)
                                             result = "<a href='"+encodeURI(actions.open)+"'>" + result + "</a>";
                                         if (escapedValue==null || escapedValue.length < 3)
                                             // include whitespace so we can click on it, if it's really small
                                             result += "&nbsp;&nbsp;&nbsp;&nbsp;";

                                         var existing = $row.find('.dynamic-contents');
                                         // for the json url, use the full url (relative to window.location.href)
                                         var jsonUrl = actions.json ? new URI(actions.json).resolve(new URI(window.location.href)).toString() : null;
                                         // prefer to update in place, so menus don't disappear, also more efficient
                                         // (but if menu is changed, we do recreate it)
                                         if (existing.length>0) {
                                             if (that.checkFloatMenuUpToDate($row, actions.open, '.actions-open', 'open-target') &&
                                                 that.checkFloatMenuUpToDate($row, escapedValue, '.actions-copy') &&
                                                 that.checkFloatMenuUpToDate($row, actions.json, '.actions-json-open', 'open-target') &&
                                                 that.checkFloatMenuUpToDate($row, jsonUrl, '.actions-json-copy', 'copy-value')) {
//                                                 log("updating in place "+configName)
                                                 existing.html(result);
                                                 return $row.find('td.config-value').html();
                                             }
                                         }
                                         
                                         // build the menu - either because it is the first time, or the actions are stale
//                                         log("creating "+configName);
                                         
                                         var downMenu = "";
                                         if (actions.open)
                                             downMenu += "<div class='light-popup-menu-item valueOpen actions-open' open-target='"+actions.open+"'>" +
                                                    "Open</div>";
                                         if (hasEscapedValue) downMenu +=
                                             "<div class='light-popup-menu-item handy valueCopy actions-copy clipboard-item'>Copy Value</div>";
                                         if (actions.json) downMenu +=
                                             "<div class='light-popup-menu-item handy valueOpen actions-json-open' open-target='"+actions.json+"'>" +
                                                 "Open REST Link</div>";
                                         if (actions.json && hasEscapedValue) downMenu +=
                                             "<div class='light-popup-menu-item handy valueCopy actions-json-copy clipboard-item' copy-value='"+
                                                 jsonUrl+"'>Copy REST Link</div>";
                                         if (downMenu=="") {
//                                             log("no actions for "+configName);
                                             downMenu += 
                                                 "<div class='light-popup-menu-item'>(no actions)</div>";
                                         }
                                         downMenu = "<div class='floatDown'><div class='light-popup'><div class='light-popup-body'>"
                                             + downMenu +
                                             "</div></div></div>";
                                         result = "<span class='hasFloatLeft dynamic-contents'>" + result +
                                                "</span>" +
                                                "<div class='floatLeft'><span class='icon-chevron-down hasFloatDown'></span>" +
                                                downMenu +
                                                "</div>";
                                         result = "<div class='floatGroup"+
                                            (isSecret ? " secret-info" : "")+
                                            "'>" + result + "</div>";
                                         // also see updateFloatMenus which wires up the JS for these classes
                                         
                                         return result;
                                     },
                                     "aTargets": [ 2 ]
                                 },
                                 // ID in column 0 is standard (assumed in ViewUtils)
                                 { bVisible: false,  aTargets: [ 0 ],
                                   mRender: function(data) { return _.escape(data); } }
                             ]            
            });
            
            this.zeroClipboard = new ZeroClipboard();
            this.zeroClipboard.on( "dataRequested" , function(client) {
                try {
                    // the zeroClipboard instance is a singleton so check our scope first
                    if (!$(this).closest("#config-table").length) return;
                    var text = $(this).attr('copy-value');
                    if (!text) text = $(this).closest('.floatGroup').find('.value').text();
                    
//                    log("Copying config text '"+text+"' to clipboard");
                    client.setText(text);

                    // show the word "copied" for feedback;
                    // NB this occurs on mousedown, due to how flash plugin works
                    // (same style of feedback and interaction as github)
                    // the other "clicks" are now triggered by *mouseup*
                    var $widget = $(this);
                    var oldHtml = $widget.html();
                    $widget.html('<b>Copied!</b>');
                    // use a timeout to restore because mouseouts can leave corner cases (see history)
                    setTimeout(function() { $widget.html(oldHtml); }, 600);
                } catch (e) {
                    log("Zeroclipboard failure; falling back to prompt mechanism");
                    log(e);
                    Util.promptCopyToClipboard(text);
                }
            });
            // these seem to arrive delayed sometimes, so we also work with the clipboard-item class events
            this.zeroClipboard.on( "mouseover", function() { that.noteFloatMenuZeroClipboardItem(true, this); } );
            this.zeroClipboard.on( "mouseout", function() { that.noteFloatMenuZeroClipboardItem(false, this); } );
            this.zeroClipboard.on( "mouseup", function() { that.closeFloatMenuNow(); } );

            ViewUtils.addFilterEmptyButton(this.table);
            ViewUtils.addAutoRefreshButton(this.table);
            ViewUtils.addRefreshButton(this.table);
            this.loadConfigMetadata();
            this.updateConfigPeriodically();
            this.toggleFilterEmpty();
            return this;
        },

        beforeClose: function () {
            if (this.zeroClipboard) {
                this.zeroClipboard.destroy();
            }
        },

        floatMenuActive: false,
        lastFloatMenuRowId: null,
        lastFloatFocusInTextForEventUnmangling: null,
        updateFloatMenus: function() {
            $('#config-table *[rel="tooltip"]').tooltip();
            this.zeroClipboard.clip( $('.valueCopy') );
        },
        showFloatLeft: function(event) {
            this.noteFloatMenuFocusChange(true, event, "show-left");
            this.showFloatLeftOf($(event.currentTarget));
        },
        showFloatLeftOf: function($hasFloatLeft) {
            $hasFloatLeft.next('.floatLeft').show(); 
        },
        enterFloatDown: function(event) {
            this.noteFloatMenuFocusChange(true, event, "show-down");
//            log("entering float down");
            var fdTarget = $(event.currentTarget);
//            log( fdTarget );
            this.floatDownFocus = fdTarget;
            var that = this;
            setTimeout(function() {
                that.showFloatDownOf( fdTarget );
            }, 200);
        },
        exitFloatDown: function(event) {
//            log("exiting float down");
            this.floatDownFocus = null;
        },
        showFloatDownOf: function($hasFloatDown) {
            if ($hasFloatDown != this.floatDownFocus) {
//                log("float down did not hover long enough");
                return;
            }
            var down = $hasFloatDown.next('.floatDown');
            down.show();
            $('.light-popup', down).show(2000); 
        },
        noteFloatMenuActive: function(focus) { 
            this.noteFloatMenuFocusChange(true, focus, "menu");
            
            // remove dangling zc events (these don't always get removed, apparent bug in zc event framework)
            // this causes it to flash sometimes but that's better than leaving the old item highlighted
            if (focus.toElement && $(focus.toElement).hasClass('clipboard-item')) {
                // don't remove it
            } else {
                var zc = $(focus.target).closest('.floatGroup').find('div.zeroclipboard-is-hover');
                zc.removeClass('zeroclipboard-is-hover');
            }
        },
        noteFloatMenuSeemsInactive: function(focus) { this.noteFloatMenuFocusChange(false, focus, "menu"); },
        noteFloatMenuActiveCI: function(focus) { this.noteFloatMenuFocusChange(true, focus, "menu-clip-item"); },
        noteFloatMenuSeemsInactiveCI: function(focus) { this.noteFloatMenuFocusChange(false, focus, "menu-clip-item"); },
        noteFloatMenuZeroClipboardItem: function(seemsActive,focus) { 
            this.noteFloatMenuFocusChange(seemsActive, focus, "clipboard");
            if (seemsActive) {
                // make the table row highlighted (as the default hover event is lost)
                // we remove it when the float group goes away
                $(focus).closest('tr').addClass('zeroclipboard-is-hover');
            } else {
                // sometimes does not get removed by framework - though this doesn't seem to help
                // as you can see by logging this before and after:
//                log(""+$(focus).attr('class'))
                // the problem is that the framework seems sometime to trigger this event before adding the class
                // see in noteFloatMenuActive where we do a different check
                $(focus).removeClass('zeroclipboard-is-hover');
            }
        },
        noteFloatMenuFocusChange: function(seemsActive, focus, caller) {
//            log(""+new Date().getTime()+" note active "+caller+" "+seemsActive);
            var delayCheckFloat = true;
            var focusRowId = null;
            var focusElement = null;
            if (focus) {
                focusElement = focus.target ? focus.target : focus;
                if (seemsActive) {
                    this.lastFloatFocusInTextForEventUnmangling = $(focusElement).text();
                    focusRowId = focus.target ? $(focus.target).closest('tr').attr('id') : $(focus).closest('tr').attr('id');
                    if (this.floatMenuActive && focusRowId==this.lastFloatMenuRowId) {
                        // lastFloatMenuRowId has not changed, when moving within a floatgroup
                        // (but we still get mouseout events when the submenu changes)
//                        log("redundant mousein from "+ focusRowId );
                        return;
                    }
                } else {
                    // on mouseout, skip events which are bogus
                    // first, if the toElement is in the same floatGroup
                    focusRowId = focus.toElement ? $(focus.toElement).closest('tr').attr('id') : null;
                    if (focusRowId==this.lastFloatMenuRowId) {
                        // lastFloatMenuRowId has not changed, when moving within a floatgroup
                        // (but we still get mouseout events when the submenu changes)
//                        log("skipping, internal mouseout from "+ focusRowId );
                        return;
                    }
                    // check (a) it is the 'out' event corresponding to the most recent 'in'
                    // (because there is a race where it can say  in1, in2, out1 rather than in1, out2, in2
                    if ($(focusElement).text() != this.lastFloatFocusInTextForEventUnmangling) {
//                        log("skipping, not most recent mouseout from "+ focusRowId );
                        return;
                    }
                    if (focus.toElement) {
                        if ($(focus.toElement).hasClass('global-zeroclipboard-container')) {
//                            log("skipping out, as we are moving to clipboard container");
                            return;
                        }
                        if (focus.toElement.name && focus.toElement.name=="global-zeroclipboard-flash-bridge") {
//                            log("skipping out, as we are moving to clipboard movie");
                            return;                            
                        }
                    }
                } 
            }           
//            log( "moving to "+focusRowId );
            if (seemsActive && focusRowId) {
//                log("setting lastFloat when "+this.floatMenuActive + ", from "+this.lastFloatMenuRowId );
                if (this.lastFloatMenuRowId != focusRowId) {
                    if (this.lastFloatMenuRowId) {
                        // the floating menu has changed, hide the old
//                        log("hiding old menu on float-focus change");
                        this.closeFloatMenuNow();
                    }
                }
                // now show the new, if possible (might happen multiple times, but no matter
                if (focusElement) {
//                    log("ensuring row "+focusRowId+" is showing on change");
                    this.showFloatLeftOf($(focusElement).closest('tr').find('.hasFloatLeft'));
                    this.lastFloatMenuRowId = focusRowId;
                } else {
                    this.lastFloatMenuRowId = null;
                }
            }
            this.floatMenuActive = seemsActive;
            if (!seemsActive) {
                this.scheduleCheckFloatMenuNeedsHiding(delayCheckFloat);
            }
        },
        scheduleCheckFloatMenuNeedsHiding: function(delayCheckFloat) {
            if (delayCheckFloat) {
                this.checkTime = new Date().getTime()+299;
                setTimeout(this.checkFloatMenuNeedsHiding, 300);
            } else {
                this.checkTime = new Date().getTime()-1;
                this.checkFloatMenuNeedsHiding();
            }
        },
        closeFloatMenuNow: function() {
//            log("closing float menu due do direct call (eg click)");
            this.checkTime = new Date().getTime()-1;
            this.floatMenuActive = false;
            this.checkFloatMenuNeedsHiding();
        },
        checkFloatMenuNeedsHiding: function() {
//            log(""+new Date().getTime()+" checking float menu - "+this.floatMenuActive);
            if (new Date().getTime() <= this.checkTime) {
//                log("aborting check as another one scheduled");
                return;
            }
            
            // we use a flag to determine whether to hide the float menu
            // because the embedded zero-clipboard flash objects cause floatGroup 
            // to get a mouseout event when the "Copy" menu item is hovered
            if (!this.floatMenuActive) {
//                log("HIDING FLOAT MENU")
                $('.floatLeft').hide(); 
                $('.floatDown').hide();
                $('.zeroclipboard-is-hover').removeClass('zeroclipboard-is-hover');
                lastFloatMenuRowId = null;
            } else {
//                log("we're still in")
            }
        },
        valueOpen: function(event) {
            window.open($(event.target).attr('open-target'),'_blank');
        },

        render: function() {
            return this;
        },
        checkFloatMenuUpToDate: function($row, actionValue, actionSelector, actionAttribute) {
            if (typeof actionValue === 'undefined' || actionValue==null || actionValue=="") {
                if ($row.find(actionSelector).length==0) return true;
            } else {
                if (actionAttribute) {
                    if ($row.find(actionSelector).attr(actionAttribute)==actionValue) return true;
                } else {
                    if ($row.find(actionSelector).length>0) return true;
                }
            }
            return false;
        },
        
        /**
         * Returns the actions loaded to view.configMetadata[name].actions
         * for the given name, or an empty object.
         */
        getConfigActions: function(configName) {
            var allMetadata = this.configMetadata || {};
            var metadata = allMetadata[configName] || {};
            return metadata.actions || {};
        },

        toggleFilterEmpty: function() {
            ViewUtils.toggleFilterEmpty(this.$('#config-table'), 2);
            return this;
        },

        toggleAutoRefresh: function() {
            ViewUtils.toggleAutoRefresh(this);
            return this;
        },

        enableAutoRefresh: function(isEnabled) {
            this.refreshActive = isEnabled;
            return this;
        },
        
        toggleSecrecyVisibility: function(event) {
            $(event.target).closest('.secret-info').toggleClass('secret-revealed');
        },
        
        /**
         * Loads current values for all config on an entity and updates config table.
         */
        isRefreshActive: function() { return this.refreshActive; },
        updateConfigNow:function () {
            var that = this;
            ViewUtils.get(that, that.model.getConfigUpdateUrl(), that.updateWithData,
                    { enablement: that.isRefreshActive });
        },
        updateConfigPeriodically:function () {
            var that = this;
            ViewUtils.getRepeatedlyWithDelay(that, that.model.getConfigUpdateUrl(), function(data) { that.updateWithData(data); },
                    { enablement: that.isRefreshActive });
        },
        updateWithData: function (data) {
            var that = this;
            $table = that.$('#config-table');
            var options = {};
            
            if (that.fullRedraw) {
                options.refreshAllRows = true;
                that.fullRedraw = false;
            }
            ViewUtils.updateMyDataTable($table, data, function(value, name) {
                var metadata = that.configMetadata[name];
                if (metadata==null) {                        
                    // kick off reload metadata when this happens (new config for which no metadata known)
                    // but only if we haven't loaded metadata for a while
                    metadata = { 'name':name };
                    that.configMetadata[name] = metadata; 
                    that.loadConfigMetadataIfStale(name, 10000);
                } 
                return [name, metadata, value];
            }, options);
            
            that.updateFloatMenus();
        },

        loadConfigMetadata: function() {
            var url = this.model.getLinkByName('config'),
                that = this;
            that.lastConfigMetadataLoadTime = new Date().getTime();
            $.get(url, function (data) {
                _.each(data, function(config) {
                    var actions = {};
                    _.each(config.links, function(v, k) {
                        if (k.slice(0, 7) == "action:") {
                            actions[k.slice(7)] = v;
                        }
                    });
                    that.configMetadata[config.name] = {
                        name: config.name,
                        description: config.description,
                        actions: actions,
                        type: config.type
                    };
                });
                that.fullRedraw = true;
                that.updateConfigNow();
                that.table.find('*[rel="tooltip"]').tooltip();
            });
            return this;
        },
        
        loadConfigMetadataIfStale: function(configName, recency) {
            var that = this;
            if (!that.lastConfigMetadataLoadTime || that.lastConfigMetadataLoadTime + recency < new Date().getTime()) {
//                log("reloading metadata because new config "+configName+" identified")
                that.loadConfigMetadata();
            }
        }
    });
    return EntityConfigView;
});