/**
 * 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.
 */

define(['require',
    'backbone',
    'hbs!tmpl/graph/LineageLayoutView_tmpl',
    'collection/VLineageList',
    'models/VEntity',
    'utils/Utils',
    'dagreD3',
    'd3-tip',
    'utils/Globals'
], function(require, Backbone, LineageLayoutViewtmpl, VLineageList, VEntity, Utils, dagreD3, d3Tip, Globals) {
    'use strict';

    var LineageLayoutView = Backbone.Marionette.LayoutView.extend(
        /** @lends LineageLayoutView */
        {
            _viewName: 'LineageLayoutView',

            template: LineageLayoutViewtmpl,

            /** Layout sub regions */
            regions: {},

            /** ui selector cache */
            ui: {
                graph: ".graph"
            },

            /** ui events hash */
            events: function() {
                var events = {};
                return events;
            },

            /**
             * intialize a new LineageLayoutView Layout
             * @constructs
             */
            initialize: function(options) {
                _.extend(this, _.pick(options, 'globalVent', 'guid'));
                this.inputCollection = new VLineageList();
                this.outputCollection = new VLineageList();
                this.entityModel = new VEntity();
                this.inputCollection.url = "/api/atlas/lineage/" + this.guid + "/inputs/graph";
                this.outputCollection.url = "/api/atlas/lineage/" + this.guid + "/outputs/graph";
                this.bindEvents();
                this.fetchGraphData();
                this.data = {};
                this.fetchList = 0;
            },
            bindEvents: function() {
                this.listenTo(this.inputCollection, 'reset', function() {
                    this.generateData(this.inputCollection, 'input');
                    this.outputCollection.fetch({ reset: true });
                }, this);
                this.listenTo(this.outputCollection, 'reset', function() {
                    this.generateData(this.outputCollection, 'output');
                    this.outputState = true;
                }, this);
                this.listenTo(this.outputCollection, 'error', function() {
                    this.addNoDataMessage();
                }, this);
                this.listenTo(this.inputCollection, 'error', function() {
                    this.addNoDataMessage();
                }, this);
            },
            onRender: function() {
                this.$('.fontLoader').show();
                this.g = new dagreD3.graphlib.Graph()
                    .setGraph({
                        nodesep: 50,
                        ranksep: 90,
                        rankdir: "LR",
                        marginx: 20,
                        marginy: 20,
                        transition: function transition(selection) {
                            return selection.transition().duration(500);
                        }
                    })
                    .setDefaultEdgeLabel(function() {
                        return {};
                    });
            },
            fetchGraphData: function() {
                this.inputCollection.fetch({ reset: true });
            },
            addNoDataMessage: function() {
                //this.$('svg').height('100');
                this.$('svg').html('<text x="' + (this.$('svg').width() - 150) / 2 + '" y="' + this.$('svg').height() / 2 + '" fill="black">No lineage data found</text>');
                this.$('.fontLoader').hide();
            },
            generateData: function(collection, type) {
                var that = this;

                function addValueInObject(data) {
                    var obj = {};
                    if (data && data.definition) {
                        if (data.definition.values) {
                            var values = data.definition.values;
                            obj['label'] = values.name.trunc(20);
                            obj['toolTiplabel'] = values.name;
                            obj['id'] = data.GUID;
                            if (values.queryText) {
                                obj['queryText'] = values.queryText;
                            }
                            if (data.definition.id && data.definition.id.state) {
                                obj['state'] = data.definition.id.state;
                            }
                        }
                    } else {
                        obj['label'] = ""
                        obj['toolTiplabel'] = "";
                    }
                    obj['shape'] = "img";
                    obj['class'] = "type-TOP";
                    if (data.GUID) {
                        that.g.setNode(data.GUID, obj);
                    } else {
                        if (data && data.definition) {
                            if (_.isString(data.definition.id)) {
                                that.g.setNode(data.definition.id, obj);
                            } else if (_.isString(data.definition.id.id)) {
                                that.g.setNode(data.definition.id.id, obj);
                            }
                        }
                    }
                    --that.fetchList;
                    if (that.fetchList <= 0) {
                        if (that.edgesAndvertices) {
                            that.createGraph(that.edgesAndvertices, that.startingPoint);
                        } else if (this.outputState && !that.edgesAndvertices) {
                            that.addNoDataMessage();
                        }
                    }
                }

                function fetchLoadProcess(id) {
                    ++that.fetchList;
                    that.entityModel.getEntity(id, {
                        success: function(data) {
                            addValueInObject(data);
                        },
                        error: function(error, data, status) {},
                        complete: function() {}
                    });
                }

                function makeNode(c) {
                    var edges = c.edges,
                        vertices = c.vertices,
                        allKeys = [];
                    _.each(c.edges, function(val, key, obj) {
                        allKeys.push(key);
                        _.each(val, function(val1, key1, obj1) {
                            allKeys.push(val1);
                        });
                    });
                    var uniquNode = _.uniq(allKeys);
                    _.each(uniquNode, function(val, key) {
                        var obj = {};
                        if (vertices[val] && vertices[val].values) {
                            obj['label'] = vertices[val].values.name.trunc(20);
                            obj['toolTiplabel'] = vertices[val].values.name;
                            obj['id'] = val;
                            obj['class'] = "type-TOP";
                            obj['shape'] = "img";
                            obj['typeName'] = vertices[val].values.vertexId.values.typeName;
                            if (vertices[val].values.state) {
                                obj['state'] = vertices[val].values.state;
                            } else if (vertices[val].values.vertexId.values.state) {
                                obj['state'] = vertices[val].values.vertexId.values.state;
                            }
                            if (val && obj) {
                                that.g.setNode(val, obj);
                            }
                        } else {
                            fetchLoadProcess(val);
                        }
                    });
                }
                _.each(collection.models, function(values) {
                    var valuObj = values.get('values');
                    that.startingPoint = [];
                    if (!_.isEmpty(valuObj.edges)) {
                        if (type == "input") {
                            that.edgesAndvertices = {
                                edges: {},
                                vertices: valuObj.vertices
                            };
                            _.each(valuObj.edges, function(val, key, obj) {
                                _.each(val, function(val1, key1, obj1) {
                                    if (!obj[val1]) {
                                        that.startingPoint.push(val1);
                                    }
                                    if (that.edgesAndvertices.edges[val1]) {
                                        that.edgesAndvertices.edges[val1].push(key);
                                    } else {
                                        that.edgesAndvertices.edges[val1] = [key];
                                    }
                                });
                            });
                        } else {
                            that.edgesAndvertices = valuObj;
                            that.startingPoint = [that.guid];
                        }
                        makeNode(that.edgesAndvertices);
                    } else {
                        if (type == 'output') {
                            that.outputState = true;
                        }
                    }
                });
                if (this.fetchList <= 0) {
                    if (this.edgesAndvertices) {
                        this.createGraph(that.edgesAndvertices, this.startingPoint);
                    } else if (this.outputState && !this.edgesAndvertices) {
                        this.$('.fontLoader').hide();
                        that.$('svg').height('100');
                        that.$('svg').html('<text x="' + (that.$('svg').width() - 150) / 2 + '" y="' + that.$('svg').height() / 2 + '" fill="black">No lineage data found</text>');
                    }
                }
            },
            createGraph: function(edgesAndvertices, startingPoint) {
                var that = this,
                    lastVal = "";
                _.each(startingPoint, function(val, key, obj) {
                    _.each(edgesAndvertices.edges[val], function(val1) {
                        if (val && val1) {
                            that.g.setEdge(val, val1, { 'arrowhead': "arrowPoint", lineInterpolate: 'basis' });
                        }
                        createRemaningEdge(edgesAndvertices.edges, val1);
                    });
                });

                function createRemaningEdge(obj, starting) {
                    if (obj[starting] && obj[starting].length) {
                        _.each(obj[starting], function(val, key) {
                            if (starting && val) {
                                that.g.setEdge(starting, val, { 'arrowhead': "arrowPoint", lineInterpolate: 'basis' });
                            }
                            createRemaningEdge(obj, val);
                        });
                    }
                }

                this.g.nodes().forEach(function(v) {
                    var node = that.g.node(v);
                    // Round the corners of the nodes
                    if (node) {
                        node.rx = node.ry = 5;
                    }
                });
                if (this.outputState) {
                    // Create the renderer
                    var render = new dagreD3.render();
                    // Add our custom arrow (a hollow-point)
                    render.arrows().arrowPoint = function normal(parent, id, edge, type) {
                        var marker = parent.append("marker")
                            .attr("id", id)
                            .attr("viewBox", "0 0 10 10")
                            .attr("refX", 9)
                            .attr("refY", 5)
                            .attr("markerUnits", "strokeWidth")
                            .attr("markerWidth", 10)
                            .attr("markerHeight", 8)
                            .attr("orient", "auto");

                        var path = marker.append("path")
                            .attr("d", "M 0 0 L 10 5 L 0 10 z")
                            .style("stroke-width", 1)
                            .style("stroke-dasharray", "1,0")
                            .style("fill", "#cccccc")
                            .style("stroke", "#cccccc");
                        dagreD3.util.applyStyle(path, edge[type + "Style"]);
                    };
                    render.shapes().img = function circle(parent, bbox, node) {
                        //var r = Math.max(bbox.width, bbox.height) / 2,
                        var shapeSvg = parent.insert("image")
                            .attr("class", "nodeImage")
                            .attr("xlink:href", function(d) {
                                if (node) {
                                    if (node.typeName) {
                                        if (Globals.entityStateReadOnly[node.state]) {
                                            return '../img/icon-table-delete.png';
                                        } else if (node.id == that.guid) {
                                            return '../img/icon-table-active.png';
                                        } else {
                                            return '../img/icon-table.png';
                                        }
                                    } else {
                                        if (Globals.entityStateReadOnly[node.state]) {
                                            return '../img/icon-gear-delete.png';
                                        } else if (node.id == that.guid) {
                                            return '../img/icon-gear-active.png';
                                        } else {
                                            return '../img/icon-gear.png';
                                        }
                                    }
                                }
                            }).attr("x", "-12px")
                            .attr("y", "-12px")
                            .attr("width", "24px")
                            .attr("height", "24px");
                        /*shapeSvg = parent.insert("circle", ":first-child")
                            .attr("x", 35)
                            .attr("y", 35)
                            .attr("r", 20);*/
                        node.intersect = function(point) {
                            //return dagreD3.intersect.circle(node, points, point);
                            return dagreD3.intersect.circle(node, 13, point);
                        };
                        return shapeSvg;
                    };
                    // Set up an SVG group so that we can translate the final graph.
                    var svg = d3.select(this.$("svg")[0]),
                        svgGroup = svg.append("g");
                    var zoom = d3.behavior.zoom()
                        .scaleExtent([0.5, 6])
                        .on("zoom", zoomed);

                    function zoomed() {
                        svgGroup.attr("transform",
                            "translate(" + zoom.translate() + ")" +
                            "scale(" + zoom.scale() + ")"
                        );
                    }

                    function interpolateZoom(translate, scale) {
                        var self = this;
                        return d3.transition().duration(350).tween("zoom", function() {
                            var iTranslate = d3.interpolate(zoom.translate(), translate),
                                iScale = d3.interpolate(zoom.scale(), scale);
                            return function(t) {
                                zoom
                                    .scale(iScale(t))
                                    .translate(iTranslate(t));
                                zoomed();
                            };
                        });
                    }

                    function zoomClick() {
                        var clicked = d3.event.target,
                            direction = 1,
                            factor = 0.2,
                            target_zoom = 1,
                            center = [that.g.graph().width / 2, that.g.graph().height / 2],
                            extent = zoom.scaleExtent(),
                            translate = zoom.translate(),
                            translate0 = [],
                            l = [],
                            view = { x: translate[0], y: translate[1], k: zoom.scale() };

                        d3.event.preventDefault();
                        direction = (this.id === 'zoom_in') ? 1 : -1;
                        target_zoom = zoom.scale() * (1 + factor * direction);

                        if (target_zoom < extent[0] || target_zoom > extent[1]) {
                            return false;
                        }

                        translate0 = [(center[0] - view.x) / view.k, (center[1] - view.y) / view.k];
                        view.k = target_zoom;
                        l = [translate0[0] * view.k + view.x, translate0[1] * view.k + view.y];

                        view.x += center[0] - l[0];
                        view.y += center[1] - l[1];

                        interpolateZoom([view.x, view.y], view.k);
                    }
                    d3.selectAll('button.zoomButton').on('click', zoomClick);
                    var tooltip = d3Tip()
                        .attr('class', 'd3-tip')
                        .html(function(d) {
                            var value = that.g.node(d);
                            var htmlStr = "<h5>Name: <span style='color:#359f89'>" + value.toolTiplabel + "</span></h5> ";
                            if (value.queryText) {
                                htmlStr += "<h5>Query: <span style='color:#359f89'>" + value.queryText + "</span></h5> ";
                            }
                            return htmlStr;
                        });
                    svg.call(zoom)
                        .call(tooltip);
                    this.$('.fontLoader').hide();
                    render(svgGroup, this.g);
                    svg.on("dblclick.zoom", null)
                        .on("wheel.zoom", null);
                    //change text postion 
                    svgGroup.selectAll("g.nodes g.label")
                        .attr("transform", "translate(2,-30)");

                    svgGroup.selectAll("g.nodes image")
                        .on('mouseover', function(d) {
                            tooltip.show(d);
                        })
                        .on('dblclick', function(d) {
                            tooltip.hide(d);
                            //var urlForTab = window.location.hash.split('/')[1];

                            Utils.setUrl({
                                url: '#!/detailPage/' + d,
                                mergeBrowserUrl: false,
                                trigger: true
                            });
                        })
                        .on('mouseout', function(d) {
                            tooltip.hide(d);
                        });
                    // Center the graph
                    var initialScale = 1.2;
                    zoom.translate([(this.$('svg').width() - this.g.graph().width * initialScale) / 2, (this.$('svg').height() - this.g.graph().height * initialScale) / 2])
                        .scale(initialScale)
                        .event(svg);
                    //svg.attr('height', this.g.graph().height * initialScale + 40);
                }
            }
        });
    return LineageLayoutView;
});
