var data = [["Arsenal",-0.0032967741593940836, 0.30399753945657115],["Chelsea", 0.2752159801936051, -0.0389675484210763], ["Liverpool",-0.005096951348655329, 0.026678627680541075], ["Manchester City",-0.004715381791104284, -0.12338379196523988], ["Manchester United",0.06877966010653305, -0.0850615090351779], ["Tottenham",-0.3379518099485709, -0.09933664174939877]];

var selectedTeams = [];

const colours = d3.scaleOrdinal()
    .domain(data)
    .range(["#F8B195", "#F67280", "#C06C84", "#6C5B7B", "#355C7D", "#2A363B"]);

var canvasW = 675;
var canvasH = 600;
var w = 365;
var h = 365;
var xPadding = 30;
var yPadding = 20;
var padding = 10;
var border = 0.5;
var bordercolor = 'black';

var xScale = d3.scaleLinear()
    .range([xPadding, w - padding])
    .domain([-1, 1]);

var yScale = d3.scaleLinear()
    .range([h - yPadding, padding])
    .domain([-1, 1]);

var svg = d3.select('body')
    .append("svg")
    .attr('width', canvasW)
    .attr('height', canvasH);

var circles = svg.selectAll("circle")
    .data(data)
    .enter()
    .append("circle")
    .attr("r", 7)
    .attr("cx", function(d) { return xScale(d[1]); })
    .attr("cy", function(d) { return yScale(d[2]); })
    .attr("fill", function(d) {
      var result = null;

      if (data.indexOf(d) >= 0) {
        result = colours(d);
      } else {
        result = "white";
      }
      return result;
    });

    var lasso_start = function() {
        lasso.items()
            .attr("r",7)
            .classed("not_possible",true)
            .classed("selected",false);
    };

    var lasso_draw = function() {

        lasso.possibleItems()
            .classed("not_possible",false)
            .classed("possible",true);

        lasso.notPossibleItems()
            .classed("not_possible",true)
            .classed("possible",false);
    };

    var lasso_end = function() {

        lasso.items()
            .classed("not_possible",false)
            .classed("possible",false);

        lasso.selectedItems()
            .classed("selected", true)
            .attr("r", 13);

        var selected = lasso.selectedItems().filter(function(d) {
            return d.selected === true;
        })

        var selectedDots = selected.words.map(d=>d.id);

        selectedTeams.slice(0, selectedTeams.length);
        selectedTeams.push(selectedDots);
        console.log(selectedTeams)


        lasso.items().filter(function(d) {
            return d.selected ===false
        })
            .classed({"not_possible":false,"possible":false})
            .attr("r",7);

    };

    var area = svg.append("rect")
        .attr("width", w)
        .attr("height", h)
        .style("opacity", 0);

    var lasso = d3.lasso()
        .closePathSelect(true)
        .closePathDistance(100)
        .items(circles)
        .targetArea(area)
        .on("start",lasso_start)
        .on("draw",lasso_draw)
        .on("end",lasso_end);

    svg.call(lasso);

    lasso.items(d3.selectAll("circles"));