import React, { Component } from 'react';
import _ from 'lodash';

class UserView extends Component {
  constructor(props) {
    super(props);
    this.graph = null;
    this.svgWidth = 900;
    this.svgHeight = 500;
    this.userRadius = 45;
    this.projectRadius = 65;
    this.actualData = [];
  }

  componentDidMount() {
    this.graph = d3.select('#user-viz').append('svg')
      .attr('perserveAspectRatio', 'xMinYMin')
      .attr('viewBox', `0 0 ${this.svgWidth} ${this.svgHeight}`)
      .classed('svg-content', true);
      
    this.drawUsers();
  }

  componentDidUpdate() {
    this.addCoordinates();
    this.drawUsers();
  }

  getRandomColor() {
    var letters = '6789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 10)];
    }
    return color;
  }

  getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min)) + min;
  }

  getValidCoordinates() {
    let x, y;
    let condition = true;
    while (condition) {
      x = this.getRandomInt(this.userRadius, this.svgWidth - this.userRadius);
      y = this.getRandomInt(this.userRadius, this.svgHeight - this.userRadius);

      let between = ((x > ((this.svgWidth / 2) - this.userRadius - this.projectRadius))
        && (x < ((this.svgWidth / 2) + this.userRadius + this.projectRadius))
        && (y > ((this.svgHeight / 2) - this.userRadius - this.projectRadius))
        && (y < ((this.svgHeight / 2) + this.userRadius + this.projectRadius)));

      if (!between) {
        condition = false;
      }
    }

    return {x, y};
  }

  addCoordinates() {
    let coords = this.getValidCoordinates();
    return  _.map(this.props.workerArray, (item) => {
      item.x = coords.x;
      item.y = coords.y;
      return item;
    });
  }

  drawUsers() {
    // Make the lines
    let lines = this.graph.selectAll('line')
      .data(this.props.workerArray);

    lines.enter().append('line')
      .attr('x1', (d) => { return d.x; })
      .attr('y1', (d) => { return d.y; })
      .attr('x2', this.svgWidth / 2).attr('y2',this.svgHeight / 2)
      .attr('stroke', 'black')
      .attr('stroke-width', 2)
      .attr('class', 'lines');

    lines.exit().remove();

    // Make the circles
    let field = this.graph.selectAll('circle')
      .data(this.props.workerArray);

    field.enter().append('circle')
      .attr('cx', (d) => { return d.x; })
      .attr('cy', (d) => { return d.y; })
      .attr('r', this.userRadius)
      .attr('fill', this.getRandomColor())
      .attr('class', 'circles');

    field.exit().remove();

    this.graph.append('ellipse')
      .attr('cx', this.svgWidth / 2)
      .attr('cy', this.svgHeight / 2)
      .attr('rx', this.projectRadius)
      .attr('ry', this.projectRadius)
      .attr('fill', 'pink')
      .text('Das Project')
      .attr('class', 'project-circle');
  }

  render() {
    return (
      <div id="user-viz"></div>
    );
  }
}

export default UserView;

@@ -279,22 +279,23 @@
 is.a
-ctualData = %5B%5D
+ddCoordinates()
 ;%0A  
@@ -528,15 +528,9 @@
 e);%0A
-      
 %0A
+
     
@@ -1653,16 +1653,8 @@
     
-return  
 _.ma
@@ -1684,16 +1684,23 @@
 y, (item
+, index
 ) =%3E %7B%0A 
@@ -1748,16 +1748,46 @@
 ords.y;%0A
+      item.index = index + 1;%0A
       re
@@ -2572,24 +2572,24 @@
 circles');%0A%0A
-
     field.ex
@@ -2600,24 +2600,385 @@
 .remove();%0A%0A
+    // Add text labels to each user%0A    let text = this.graph.selectAll('text')%0A      .data(this.props.workerArray);%0A%0A    text.enter().append('text')%0A      .attr('x', (d) =%3E %7B return d.x - (this.userRadius / 2.5); %7D)%0A      .attr('y', (d) =%3E %7B return d.y + (this.userRadius / 9); %7D)%0A      .text((d) =%3E %7B return %60User $%7Bd.index%7D%60;%7D );%0A%0A    text.exit().remove();%0A%0A
     this.gra

Add text labels to users