var cHeight = 800;
var cWidth = 700;

// Prepare our physical space
var canvas = d3
    .select("#chart")
    .attr("width", cWidth)
    .attr("height", cHeight)
    .attr("transform", "translate(" + 10 + "," + 0 + ")");

var g = canvas
    .append("g")
    .attr("transform", "translate(" + 120 + "," + 0 + ")");

// Define 'div' for tooltips
var infodiv = d3.select("#infodiv").attr("opacity", 0);
var color = d3.scaleOrdinal(d3.schemeCategory10);

function loadAndPrepareData(filter) {
    d3.csv("data.csv", function(error, csvData) {
        if (error) throw error;

        var massagedData = [];
        if (filter) {
            massagedData = csvData.map(function(d) {
                var highlight =
                    d.skills.toLowerCase().search(filter) != -1 ||
                    d.what_i_do.toLowerCase().search(filter) != -1 ||
                    d.within.toLowerCase().search(filter) != -1 
                        ? true
                        : false;
                return { d: d, highlight: highlight };
            });
        } else {
            massagedData = csvData.map(function(d) {
                return { d: d, highlight: false };
            });
        }

        var colorData = Array.from(
            new Set(
                csvData.map(function(d) {
                    return d.job_family;
                })
            )
        ).sort(function(a, b) {
            return a.localeCompare(b);
        });

        //console.log(csvData)
        //console.log(massagedData)
        drawViz(massagedData);

        //console.log(colorData)
        drawLegend(colorData);
    });
}

function drawLegend(colorData) {
    d3
        .select("#legend")
        .selectAll("g")
        .html("");

    var legendDotSize = 30;
    var legendWrapper = d3
        .select("#legend")
        .append("g")
        .attr("class", "legend");

    // The text of the legend
    var legendText = legendWrapper.selectAll("text").data(colorData);

    legendText
        .enter()
        .append("text")
        .attr("y", function(d, i) {
            return i * legendDotSize + 12;
        })
        .attr("x", 20)
        .merge(legendText)
        .text(function(d) {
            return d;
        });

    // The dots of the legend
    var legendDot = legendWrapper.selectAll("rect").data(colorData);

    legendDot
        .enter()
        .append("rect")
        .attr("y", function(d, i) {
            return i * legendDotSize;
        })
        .attr("rx", legendDotSize * 0.5)
        .attr("ry", legendDotSize * 0.5)
        .attr("width", legendDotSize * 0.5)
        .attr("height", legendDotSize * 0.5)
        .merge(legendDot)
        .style("fill", function(d) {
            return color(d);
        });
}

function drawViz(data) {
    d3
        .select("#chart")
        .selectAll("g")
        .html("");

    var stratify = d3
        .stratify()
        .id(function(d) {
            return d.d.id;
        })
        .parentId(function(d) {
            return d.d.line_manager;
        });

    var tree;
    tree = d3.cluster().size([cHeight, cWidth]); // height, width
    var root = stratify(data).sort(function(a, b) {
        return (
            a.data.d.job_family.localeCompare(b.data.d.job_family) ||
            b.height - a.height
        );
    });

    tree(root);
    //console.log(root);

    var link = g.selectAll(".link").data(root.descendants().slice(1));

    link
        .enter()
        .append("path")
        .attr("class", "link")
        .merge(link)
        .attr("d", function(d) {
            return (
                "M" +
                d.y +
                "," +
                d.x +
                "C" +
                (d.parent.y + 100) +
                "," +
                d.x +
                " " +
                (d.parent.y + 100) +
                "," +
                d.parent.x +
                " " +
                d.parent.y +
                "," +
                d.parent.x
            );
        });

    var node = g.selectAll(".node").data(root.descendants());

    node.group = node
        .enter()
        .append("g")
        .attr("class", function(d) {
            return "node" + (d.children ? " node--internal" : " node--leaf");
        });

    node.group.merge(node).attr("transform", function(d) {
        return "translate(" + d.y + "," + d.x + ")";
    });

    node.group
        .append("circle")
        .attr("r", function(d) {
            return d.data.highlight ? 15 : 10;
        })
        .attr("fill", function(d) {
            return color(d.data.d.job_family);
        })
        .attr("stroke", "white")
        .attr("opacity", function(d) {
            return d.data.highlight ? 1 : 0.7;
        });

    // MOUSEOVER EVENTS - Tooltip stuff after this etc
    var people = d3.selectAll("circle");
    people.on("mouseover", function(d) {
        d3
            .select(this)
            .transition()
            .duration(200)
            .attr("r", function(d) {
                return d.data.highlight ? 20 : 15;
            });

        infodiv.html(
            "<big><b>" +
                d.data.d.id +
                "</b></big><br>" +
                d.data.d.job_title +
                "<br>" +
                d.data.d.job_family +
                "<br>" +
                "Reporting to: " +
                d.data.d.line_manager +
                "<br>" +
                "<br>-----<br><br>" +
                "ADDED INFORMATION<br>" +
                "<br><big><b>" +
                d.data.d.within +
                "</b></big><br><br>" +
                "<b>What I do</b><br>" +
                d.data.d.what_i_do +
                "<br>" +
                "<br>" +
                "<b>Skills</b><br>" +
                d.data.d.skills +
                "<br>" +
                "<br>" +
                "<b>Contact</b><br>" +
                d.data.d.email +
                "<br>" +
                d.data.d.location +
                "<br>"
        );
    });
    people.on("mouseout", function() {
        d3
            .select(this)
            .transition()
            .duration(200)
            .attr("r", function(d) {
                return d.data.highlight ? 15 : 10;
            });
    });

    node.group
        .append("text")
        .text(function(d) {
            return d.data.d.id;
        })
        .merge(node.select("text"))
        .attr("dy", function(d) {
            return d.children ? -15 : 10;
        })
        .attr("x", function(d) {
            return d.children ? -1 * (this.getBBox().width + -15) : 25;
        })
        .attr("font-weight", function(d) {
            return d.data.highlight ? "bold" : "normal";
        });
}

// Search
function handleClickSearch(event) {
    currentSearchTerm = document
        .getElementById("mySearchTerm")
        .value.toLowerCase();
    //console.log(currentSearchTerm)
    loadAndPrepareData(currentSearchTerm);
    return false;
}

loadAndPrepareData();