import store from './../../store/store.js'

export default function renderEntitiesGraph(graph) {
    var d3 = require("d3");
    console.log('graph edges = ', graph.edges);
    var svg = d3.select("#entities-graph-canvas"),
        width = +svg.attr("width"),
        height = +svg.attr("height");

    var nodeTooltip = d3.select("body").append("div")
        .attr("class", "node-tooltip")
        .on("mouseover", function() {
            clearTimeout(nodeTooltipHideTimeout);
            nodeTooltip.transition()
                .duration(50)
                .style("opacity", 1);
        })
        .on("mouseleave", function() {
            console.log("here!");
            nodeTooltip.transition()
                .duration(200)
                .style("opacity", 0);

            setTimeout(
                () => nodeTooltip.style("display", "none"),
                200);
        });

    var linkTooltip = d3.select("body").append("div")
        .attr("class", "link-tooltip")
        .on("mouseover", function() {
            clearTimeout(linkTooltipHideTimeout);
            linkTooltip.transition()
                .duration(50)
                .style("opacity", 1);
        })
        .on("mouseleave", function() {
            linkTooltip.transition()
                .duration(200)
                .style("opacity", 0);

            setTimeout(
                () => linkTooltip.style("display", "none"),
                200);
        });

    var nodeTooltipHideTimeout, linkTooltipHideTimeout;

    var nodeTooltipTitleWrapper = nodeTooltip.append("div")
        .attr("class", "node-tooltip-title-wrapper");

    var nodeTooltipTitle = nodeTooltipTitleWrapper.append("a")
        .attr("class", "node-tooltip-title");

    var linkTooltipTitle = linkTooltip.append("div")
        .attr("class", "link-tooltip-title")
        .html("Статьи");

    var linkTooltipArticlesList = linkTooltip.append("ul")
        .attr("class", "link-tooltip-articles-list");

    var linkTooltipListItems = [];
    var linkTooltipListArticles = [];
    for (var i = 0; i < 6; i++) {
        var newItem = linkTooltipArticlesList.append('li').attr("class", "link-tooltip-article-item");
        var newArticle = newItem.append('a');
        linkTooltipListItems.push(newItem);
        linkTooltipListArticles.push(newArticle);
    }

    let centralNode = graph.vertices[0];
    let colors = {};
    graph.vertices.forEach(function(d) {

        d.color = d3.interpolateRainbow(Math.random());
        // colors.push(d.color)
        colors[d.id] = d.color;
        // $('#label-' + d.id).css("background", d.color)
    });
    // store.state.colorLabels = colors;


    var n_vertices = graph.vertices.length;

    var simulation = d3.forceSimulation()
        .force("link", d3.forceLink().iterations(4).id(function(d) {
            return d.id;
        }))
        // .force("size", )
        .force("charge", d3.forceManyBody().strength(-10000 / n_vertices))
        .force("center", d3.forceCenter(400, 250))
        .force("x", d3.forceX())
        .force("y", d3.forceY());

    // svg.attr("transform","translate(100, 50) scale(" + 10 / n_vertices + ", " + 10 / n_vertices + " )");

    var g = svg.append("g");

    var link = g.append("g")
        .attr("class", "links")
        .selectAll("line")
        .data(graph.edges)
        .enter().append("line")
        .attr("stroke-width", function(d) {
            return Math.sqrt(d.articles.length);
        })
        .on("mouseover", function(d) {

            clearTimeout(linkTooltipHideTimeout);


            var x = this.getBoundingClientRect().x + this.getBoundingClientRect().width / 2;
            var y = this.getBoundingClientRect().y + this.getBoundingClientRect().height / 2;

            for (var i = 0; i < 5; i++) {
                linkTooltipListItems[i].style('display', 'block');
            }
            for (var i = 0; i < Math.min(6, d.articles.length); i++) {
                var articleId = d.articles[i];
                var article = graph.articles.find(x => x.id === articleId);
                linkTooltipListArticles[i]
                    .html(article.title)
                    .attr("href", article.link);
            }
            for (var i = d.articles.length; i < 6; i++) {
                linkTooltipListItems[i].style('display', 'none');
            }

            linkTooltip.style("display", "block");

            linkTooltip.transition()
                .duration(200)
                .style("opacity", 1);

            linkTooltip
                .style("left", x - parseFloat(linkTooltip.style("width")) / 2 + window.scrollX + "px")
                .style("top", y - parseFloat(linkTooltip.style("height")) - 15 + window.scrollY + "px");
        })
        .on("mouseout", function(d) {
            linkTooltip.transition()
                .duration(400)
                .style("opacity", 0);

            linkTooltipHideTimeout = setTimeout(
                () => linkTooltip.style("display", "none"),
                400);
        });

    var node = g.append("g")
        .attr("class", "nodes")
        .selectAll("circle")
        .data(graph.vertices)
        .enter().append("circle")
        .attr("r", 9)
        .attr("fill", function(d) {
            return d.color;
        })
        .call(d3.drag()
            .on("start", dragstarted)
            .on("drag", dragged)
            .on("end", dragended))
        .on("mouseover", function(d) {
            console.log("mouse over node!")

            clearTimeout(nodeTooltipHideTimeout);

            var x = this.getBoundingClientRect().x + this.getBoundingClientRect().width / 2;
            var y = this.getBoundingClientRect().y;


            nodeTooltip.transition()
                .duration(200)
                .style("opacity", 1);

            nodeTooltipTitle.html(d.title)
                .attr('href', '#/profile/' + d.id)
                .attr('onclick', "location.reload()");

            nodeTooltip
                .style("left", x - parseFloat(nodeTooltip.style("width")) / 2 + window.scrollX + "px")
                .style("top", y - parseFloat(nodeTooltip.style("height")) - 15 + window.scrollY + "px");

            nodeTooltip
                .style("display", "block");
        })
        .on("mouseout", function(d) {

            nodeTooltip.transition()
                .duration(1000)
                .style("opacity", 0);

            nodeTooltipHideTimeout = setTimeout(
                () => nodeTooltip.style("display", "none"),
                1000);
        });

    svg.call(d3.zoom()
            .scaleExtent([1 / 2, 8])
            .on("zoom", zoomed));

    function zoomed() {
            g.attr("transform", d3.event.transform);
    }

    simulation
        .nodes(graph.vertices)
        .on("tick", ticked);

    simulation.force("link")
        .links(graph.edges);

    function ticked() {
        link
            .attr("x1", function(d) {
                return d.source.x;
            })
            .attr("y1", function(d) {
                return d.source.y;
            })
            .attr("x2", function(d) {
                return d.target.x;
            })
            .attr("y2", function(d) {
                return d.target.y;
            });

        node
            .attr("cx", function(d) {
                return d.x;
            })
            .attr("cy", function(d) {
                return d.y;
            });
    }

    function dragstarted(d) {
        if (!d3.event.active) simulation.alphaTarget(0.3).restart();
        d.fx = d.x;
        d.fy = d.y;
    }

    function dragged(d) {
        d.fx = d3.event.x;
        d.fy = d3.event.y;
    }

    function dragended(d) {
        if (!d3.event.active) simulation.alphaTarget(0);
        d.fx = null;
        d.fy = null;
    }

    function redirectToEntityPage(id) {
        router.push('/profile/'+ entityId + '/');
    }

    return colors;
};