/**
 * 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.
 */
/*
 * Graph Editor is based on Directed Graph Editor by rkirsling http://bl.ocks.org/rkirsling/5001347.
 */

/*
 * Editor is a class that encapsulates the graph editing window
 * @param {container, [undirected]} options - Initialize editor with these options.
 * {options.container} - HTML element that contains the editor svg.
 * {options.undirected} - Indicate whether the graph is directed/undirected.
 * @constructor
 */
function Editor(options) {
    this.container = 'body';
    this.undirected = false;
    // Readonly editor does not let users
    // add new nodes/links.
    this.readonly = false;
    // Data for the graph nodes and edges.
    this.defaultColor = '#FFFDDB'
    // Useful options. Not required by the editor class itself.
    this.errorColor = '#FF9494';
    // Maximum number of nodes for which the graph view would be constructed and maintained.
    this.graphViewNodeLimit = 2000;
    // Graph members
    this.nodes = [];
    this.links = [];
    this.messages = [];
    this.currentZoom = { translate : [0,0], scale : 1 };
    // Table members
    // Current scenario (adjList) object as received from the server.
    this.currentScenario = {};
    // aggregators is a collecton of key-value pairs displayed in the top-right corner.
    this.aggregators = {};
    // set graph as the default view
    this.view = Editor.ViewEnum.GRAPH;
    // linkDistance controls the distance between two nodes in the graph.
    this.linkDistance = 150;
    if (options) {
        this.container = options['container'] ? options['container'] : this.container;
        this.undirected = options['undirected'] === true;
        if (options.onOpenNode) {
            this.onOpenNode = options.onOpenNode;
        }
        if (options.onOpenEdge) {
            this.onOpenEdge = options.onOpenEdge;
        }
    }
    this.setSize();
    this.lastKeyDown = -1;
    this.init();
    this.buildSample();
    return this;
}

/*
 * Represents the two views of the editor - tabular and graph
 */
Editor.ViewEnum = {
    TABLET : 'tablet',
    GRAPH : 'graph'
}

Editor.prototype.onToggleView = function(toggleViewHandler) {
    this.onToggleView.done = toggleViewHandler;
}

/*
 * Build a sample graph with three nodes and two edges.
 */
Editor.prototype.buildSample = function() {
    this.empty();
    // Start with a sample graph.
    for(var i = 0; i < 3; i++) {
        this.addNode();
    }
    this.addEdge('1', '2');
    this.addEdge('2', '3');
    this.restartGraph();
}

/*
 * Empties the graph by deleting all nodes and links.
 */
Editor.prototype.empty = function() {
    // NOTE : Don't use this.nodes = [] to empty the array
    // This creates a new reference and messes up this.force.nodes
    this.nodes.length = 0;
    this.links.length = 0;
    this.messages.length = 0;
    this.numNodes = 0;
    this.restartGraph();
}

/*
 * Initializes the SVG elements, force layout and event bindings.
 */
Editor.prototype.init = function() {
    // Initializes the SVG elements.
    this.initElements();
    // Binds events and initializes variables used to track selected nodes/links.
    this.initEvents();
    // Line displayed when dragging an edge off a node
    this.drag_line = this.svg.append('svg:path')
                                 .attr('class', 'link dragline hidden')
                                 .attr('d', 'M0,0L0,0');
    // Handles to link and node element groups.
    var pathContainer = this.svg.append('svg:g')
    this.path = pathContainer.selectAll('path');
    this.pathLabels = pathContainer.selectAll('text');
    this.circle = this.svg.append('svg:g').selectAll('g');
    // Initializes the force layout.
    this.initForce();
    this.restartGraph();
}

/* 
 * Wrapper for restarting both graph and table. Automatically switches to table
 * view if the number of nodes is too large.
 */
Editor.prototype.restart = function() {
    // If numNodes > graphViewLimit, empty the graph and switch
    // to table view.
    if (this.numNodes > this.graphViewNodeLimit) {
        this.empty();
        if (this.view != Editor.ViewEnum.TABLET) {
            this.toggleView();
        }
    }
    this.restartGraph();
    this.restartTable();
}

/*
 * Updates the graph. Called internally on various events.
 * May be called from the client after updating graph properties.
 */
Editor.prototype.restartGraph = function() {
    this.setSize();
    this.restartNodes();
    this.restartLinks();
    this.resizeForce();
    this.restartAggregators();

    // Set the background to light gray if editor is readonly.
    d3.select('.editor').style('background-color', this.readonly ? '#f9f9f9' : 'white');
    this.svgRect.attr('fill', this.readonly ? '#f9f9f9' : 'white')
                    .attr('width', this.width)
                    .attr('height', this.height);

    // Set the graph in motion
    this.force.start();
}

/*
 * Handles mousedown event.
 * Insert a new node if Shift key is not pressed. Otherwise, drag the graph.
 */
Editor.prototype.mousedown = function() {
    if (this.readonly === true) {
        return;
    }
    this.svg.classed('active', true);
    if (d3.event.shiftKey || this.mousedown_node || this.mousedown_link) {
        return;
    }
    // Insert new node at point.
    var point = d3.mouse(d3.event.target),
        node =  this.addNode();
    node.x = point[0];
    node.y = point[1];
    this.restartGraph();
}

/*
 * Returns all the messages sent by node with the given id.
 * Output format: {receiverId: message}
 * @param {string} id
 */
Editor.prototype.getMessagesSentByNode = function(id) {
    var messagesSent = {};
    for (var i = 0; i < this.messages.length; i++) {
        var messageObj = this.messages[i];
        if (messageObj.outgoing === true && messageObj.sender.id === id) {
            messagesSent[messageObj.receiver.id] = messageObj.message;
        }
    }
    return messagesSent;
}

/*
 * Returns all the edge values for this node's neighbor in a JSON object.
 * Note that if an edge value is not present, still returns that neighborId with null/undefined value.
 * Output format: {neighborId: edgeValue}
 * @param {string} id
 */
Editor.prototype.getEdgeValuesForNode = function(id) {
    var edgeValues = {};
    var outgoingEdges = this.getEdgesWithSourceId(id);
    $.each(outgoingEdges, function(i, edge) {
        edgeValues[edge.target.id] = edge;
    });
    return edgeValues;
}

/*
 * Returns all the messages received by node with the given id.
 * Output format: {senderId: message}
 * @param {string} id
 */
Editor.prototype.getMessagesReceivedByNode = function(id) {
    var messagesReceived = {};

    for (var i = 0; i < this.messages.length; i++) {
        var messageObj = this.messages[i];
        if (messageObj.incoming === true && messageObj.receiver.id === id) {
            // Note: This is required because incoming messages do not have a sender as of now.
            var senderId = '<i data-id="' + i + '"></i>';
            messagesReceived[senderId] = messageObj.message;
        }
    }
    return messagesReceived;
}

/*
 * Returns the edge list.
 * Edge list is the representation of the graph as a list of edges.
 * An edge is represented as a vertex pair (u,v).
 */
Editor.prototype.getEdgeList = function() {
    edgeList = '';

    for (var i = 0; i < this.links.length; i++) {
        var sourceId = this.links[i].source.id;
        var targetId = this.links[i].target.id;

        // Right links are source->target.
        // Left links are target->source.
        if (this.links[i].right) {
            edgeList += sourceId + '\t' + targetId + '\n';
        } else {
            edgeList += targetId + '\t' + sourceId + '\n';
        }
    }
    return edgeList;
}

/*
 * Returns the adjacency list.
 * Adj list is the representation of the graph as a list of nodes adjacent to
 * each node.
 */
Editor.prototype.getAdjList = function() {
    adjList = {}
    $.each(this.nodes, (function(i, node) {
        var id = node.id;
        var edges = this.getEdgesWithSourceId(id);
        adjList[id] = {adj : edges, vertexValue : node.attrs}
    }).bind(this));
    return adjList;
}

/*
 * Returns the list of nodes along with their attributes.
 */
Editor.prototype.getNodeList  = function() {
    nodeList = '';
    for (var i = 0; i < this.nodes.length; i++){
        nodeList += this.nodes[i].id + '\t' + this.nodes[i].attrs;
        nodeList += (i != this.nodes.length - 1 ? '\n' : '');
    }
    return nodeList;
}

/*
 * Handle the mousemove event.
 * Updates the drag line if mouse is pressed at present.
 * Ignores otherwise.
 */
Editor.prototype.mousemove = function() {
    if (this.readonly) {
        return;
    }
    // This indicates if the mouse is pressed at present.
    if (!this.mousedown_node) {
        return;
    }
    // Update drag line.
    this.drag_line.attr('d', 'M' + this.mousedown_node.x + ',' +
        this.mousedown_node.y + 'L' + d3.mouse(this.svg[0][0])[0] + ',' +
        d3.mouse(this.svg[0][0])[1]
    );
    this.restartGraph();
}

/*
 * Handles the mouseup event.
 */
Editor.prototype.mouseup = function() {
    if (this.mousedown_node) {
        // hide drag line
        this.drag_line
            .classed('hidden', true)
            .style('marker-end', '');
    }
    this.svg.classed('active', false);
    // Clear mouse event vars
    this.resetMouseVars();
}

/*
 * Handles keydown event.
 * If Key is Shift, drags the graph using the force layout.
 * If Key is 'L' or 'R' and link is selected, orients the link likewise.
 * If Key is 'R' and node is selected, marks the node as reflexive.
 * If Key is 'Delete', deletes the selected node or edge.
 */
Editor.prototype.keydown = function() {
    if (this.lastKeyDown !== -1) {
        return;
    }
    this.lastKeyDown = d3.event.keyCode;

    // Shift key was pressed
    if (d3.event.shiftKey) {
        this.circle.call(this.force.drag);
        this.svg.classed('ctrl', true);
    }

    if (!this.selected_node && !this.selected_link || this.readonly) {
        return;
    }

    switch (d3.event.keyCode) {
        case 46: // delete
            if (this.selected_node) {
                this.nodes.splice(this.nodes.indexOf(this.selected_node), 1);
                this.spliceLinksForNode(this.selected_node);
            } else if (this.selected_link) {
                this.links.splice(this.links.indexOf(this.selected_link), 1);
            }
            this.selected_link = null;
            this.selected_node = null;
            this.restartGraph();
            break;
        case 66: // B
            if (this.selected_link) {
                // set link direction to both left and right
                this.selected_link.left = true;
                this.selected_link.right = true;
            }

            this.restartGraph();
            break;
        case 76: // L
            if (this.selected_link) {
                // set link direction to left only
                this.selected_link.left = true;
                this.selected_link.right = false;
            }

            this.restartGraph();
            break;
        case 82: // R
            if (this.selected_node) {
                // toggle node reflexivity
                this.selected_node.reflexive = !this.selected_node.reflexive;
            } else if (this.selected_link) {
                // set link direction to right only
                this.selected_link.left = false;
                this.selected_link.right = true;
            }

            this.restartGraph();
            break;
    }
}

/*
 * Handles the keyup event.
 * Resets lastKeyDown to -1.
 * Also resets the drag event binding to null if the key released was Shift.
 */
Editor.prototype.keyup = function() {
    this.lastKeyDown = -1;

    // Shift
    if (d3.event.keyCode === 16) {
        this.circle
            .on('mousedown.drag', null)
            .on('touchstart.drag', null);
        this.svg.classed('ctrl', false);
    }
}

/*
 * Builds the graph from adj list by constructing the nodes and links arrays.
 * @param {object} adjList - Adjacency list of the graph. attrs and msgs are optional.
 * Format:
 * {
 *  nodeId: {
 *            neighbors : [{ 
 *                      neighborId: "neighborId1",
 *                      edgeValue: "edgeValue1"
 *                  },
 *                  {
 *                      neighborId: "neighborId2",
 *                      edgeValue: "edgeValue2"
 *                  }],
 *            vertexValue : attrs,
 *            outgoingMessages : {
 *                    receiverId1: "message1",
 *                    receiverId2: "message2",
 *                    ...
 *                  },
 *            incomingMessages : [ "message1", "message2" ]
 *            enabled : true/false
 *          }
 * }
 */
Editor.prototype.buildGraphFromAdjList = function(adjList) {
    this.empty();

    // Scan every node in adj list to build the nodes array.
    for (var nodeId in adjList) {
        var node = this.getNodeWithId(nodeId);
        if (!node) {
            node = this.addNode(nodeId);
        }
        var adj = adjList[nodeId]['neighbors'];
        // For every node in the adj list of this node,
        // add the node to this.nodes and add the edge to this.links
        for (var i = 0; adj && i < adj.length; i++) {
            var adjId = adj[i]['neighborId'].toString();
            var edgeValue = adj[i]['edgeValue'];
            var adjNode = this.getNodeWithId(adjId);
            if (!adjNode) {
                adjNode = this.addNode(adjId);
            }
            // Add the edge.
            this.addEdge(nodeId, adjId, edgeValue);
        }
    }
    this.updateGraphData(adjList);
}

/*
 * Updates scenario properties - node attributes and messages from adj list.
 * @param {object} scenario - scenario has the same format as adjList above,
 * but with 'adj' ignored.
 * **NOTE**: This method assumes the same scenario structure,
 * only updates the node attributes and messages exchanged.
 */
Editor.prototype.updateGraphData = function(scenario) {
    // Cache the scenario object. Used by tabular view.
    this.currentScenario = scenario;
    // Clear the messages array. Unlike other fields, messages is cleared and reloaded for every scenario.
    this.messages.length = 0;

    // Scan every node in adj list to build the nodes array.
    for (var nodeId in scenario) {
        var node = this.getNodeWithId(nodeId);
        if (scenario[nodeId]['vertexValue']) {
            node.attrs = scenario[nodeId]['vertexValue'];
        }
        if (scenario[nodeId].enabled != undefined) {
            node.enabled = scenario[nodeId].enabled;
        }

        var outgoingMessages = scenario[nodeId]['outgoingMessages'];
        var incomingMessages = scenario[nodeId]['incomingMessages'];

        // Build this.messages
        if (outgoingMessages) {
            for(var receiverId in outgoingMessages) {
                this.messages.push({ 
                    sender: node,
                    receiver: this.getNodeWithId(receiverId),
                    message: outgoingMessages[receiverId],
                    outgoing : true
                });
            }
        }

        if (incomingMessages) {
            for (var i = 0; i < incomingMessages.length; i++) {
              var incomingMessage = incomingMessages[i];
              this.messages.push({ 
                  // TODO: sender is not supplied by the server as of now.
                  sender : null, 
                  receiver: node,
                  message: incomingMessage,
                  incoming : true
              });
            }
          }

        // Update aggregators
        // NOTE: Later vertices ovewrite value for a given key
        var aggregators = scenario[nodeId]['aggregators'];
        for (var key in aggregators) {
            this.aggregators[key] = aggregators[key];
        }
    }
    // Restart the graph and table to show new values.
    this.restart();
}

/*
 * Adds new nodes and links to the graph without changing the existing structure.
 * @param {object} - scenario has the same format as above.
 * **NOTE** - This method will add news nodes and links without modifying
 * the existing structure. For instance, if the passed graph object does
 * not have a link, but it already exists in the graph, it will stay.
 */
Editor.prototype.addToGraph = function(scenario) {
    for (var nodeId in scenario) {
        // If this node is not present in the graph. Add it.
        this.addNode(nodeId);
        var neighbors = scenario[nodeId]['neighbors'];
        // For each neighbor, add the edge.
        for (var i = 0 ; i < neighbors.length; i++) {
            var neighborId = neighbors[i]['neighborId'];
            var edgeValue = neighbors[i]['edgeValue'];
            // Add neighbor node if it doesn't exist.
            this.addNode(neighborId);
            // Addes edge, or ignores if already exists.
            this.addEdge(nodeId, neighborId, edgeValue);
        }
    }
}

/*
 * Shows the preloader and hides all other elements.
 */
Editor.prototype.showPreloader = function() {
    this.svg.selectAll('g').transition().style('opacity', 0);
    this.preloader.transition().style('opacity', 1);
}

/*
 * Hides the preloader and shows all other elements.
 */
Editor.prototype.hidePreloader = function() {
    this.svg.selectAll('g').transition().style('opacity', 1);
    this.preloader.transition().style('opacity', 0);
    this.restartGraph();
}

/*
 * Enables the given node. Enabled nodes are shown as opaque.
 */
Editor.prototype.enableNode = function(nodeId) {
    this.getNodeWithId(nodeId).enabled = true;
}

/*
 * Disables the given node. 
 * Disabled nodes are shown as slightly transparent with outgoing messages removed.
 */
Editor.prototype.disableNode = function(nodeId) {
    this.getNodeWithId(nodeId).enabled = false;
    // Remove the outgoing Messages for this node.
    var toSplice = this.messages.filter(function(message) {
        return (message.outgoing === true && message.sender.id === nodeId);
    });

    toSplice.map((function(message) {
        this.messages.splice(this.messages.indexOf(message), 1);
    }).bind(this));
}

/*
 * Colors the given node ids with the given color. Use this method to uncolor 
 * all the nodes (reset to default color) by calling colorNodes([], 'random', true);
 * @param {array} nodeIds - List of node ids.
 * @param {color} color - Color of these nodes.
 * @param {bool} [uncolorRest] - Optional parameter to reset the color of other nodes to default.
 */
Editor.prototype.colorNodes = function(nodeIds, color, uncolorRest) {
    // Set the color property of each node in this array. restart will reflect changes.
    for(var i = 0; i < nodeIds.length; i++) {
        var node = this.getNodeWithId(nodeIds[i]);
        if (node) {
            node.color = color;
        }
    }
    // If uncolorRest is specified
    if (uncolorRest) {
        for (var i = 0; i < this.nodes.length; i++) {
            // Not in nodeIds, uncolor it.
            if ($.inArray(this.nodes[i].id, nodeIds) === -1) {
                this.nodes[i].color = this.defaultColor;
            }
        }
    }
    this.restartGraph();
}

/* 
 * Toggles the two views of the editor by sliding up/down the tablet.
 */
Editor.prototype.toggleView = function() { 
    if (this.view === Editor.ViewEnum.GRAPH) {
        this.view = Editor.ViewEnum.TABLET;
        $(this.tablet[0]).slideDown('slow');
    } else {
        this.view = Editor.ViewEnum.GRAPH;
        $(this.tablet[0]).slideUp('slow');
    }
    // Call the handlers registered for toggleView
    this.onToggleView.done(this.view);
}

/*
 * Creates graph from a simple adj list of the format given below.
 * @param {object} simpleAdjList : A simple adjacency list.
 * Format:
 * {
 *     "vertexId1" : [ "neighborId1", "neighborId2" ...],
 *     "vertexId2" : [ "neighborId1", "neighborId2" ...],
 *     ...
 * }
 */
Editor.prototype.buildGraphFromSimpleAdjList = function(simpleAdjList) {
    var scenario = {};
    $.each(simpleAdjList, function(vertexId, neighbors) {
        scenario[vertexId] = {}
        scenario[vertexId].neighbors = [];
        $.each(neighbors, function(index, neighborId) {
            scenario[vertexId].neighbors.push({ neighborId : neighborId });
        });
    });
    this.buildGraphFromAdjList(scenario);
}