var React = require('react')
var Path = require('paths-js/path')
var angle = require('angle-between-points')

var debug = require('debug')('edge-ui')

debug('Path', Path())

// TODO use vector math
function pythagoras (a, b) {
  return Math.sqrt((a * a) + (b * b))
}

module.exports = React.createClass({
  render: function () {
    var d = this.props.edge
    var targetR = d.target.w/2
    var sourceR = d.source.w/2

    debug(d)

    if (!(
      d.target.x && d.source.x &&
      d.target.y && d.source.y
      )) {
      return null
    }

    var a = d.target.x - d.source.x
    var b = d.target.y - d.source.y

    var c = pythagoras(a, b)
    // var t = c ? ((c - r) / c) : c
    //
    // var x = (t * a) + d.source.x
    // var y = (t * b) + d.source.y

    var arrowLength = c - targetR - sourceR - 3


    var ang = angle({ x: d.source.x, y: d.source.y }, { x: d.target.x, y: d.target.y })
    ang += 90

    var path = Path()
      .moveto(d.source.x-1, d.source.y-sourceR)
      .lineto(d.source.x-1, d.source.y-arrowLength)
      .lineto(d.source.x-3, d.source.y-arrowLength)
      .lineto(d.source.x, d.source.y-arrowLength-4)
      .lineto(d.source.x+3, d.source.y-arrowLength)
      .lineto(d.source.x+1, d.source.y-arrowLength)
      .lineto(d.source.x+1, d.source.y-sourceR)
      .closepath()

    return React.createElement('path', {
      d: path.print(),

      // x1: d.source.x,
      // x2: x,
      // y1: d.source.y,
      // y2: y,
      transform: 'rotate(' + ang + ' ' + d.source.x + ' ' + d.source.y +')',
      stroke: d.color,
      fill: d.color,
      display: d.hidden ? 'none' : 'inherit'
    })
  },

  // renderHalos: function (activeRoleTypes) {
  //   var self = this
  //   var w = self.props.node.w
  //   var x = self.props.node.x
  //   var y = self.props.node.y
  //   return activeRoleTypes.map(function (roleTypeId, i) {
  //     return React.createElement('circle', {
  //       cx: x,
  //       cy: y,
  //       r: w/2+((i+1)*self.state.haloWidth),
  //       fill: self.props.node.IdMap[roleTypeId].color
  //       stroke: 'white'
  //     })
  //   }).reverse()
  // },


})

@@ -410,18 +410,81 @@
 ource.w/
+4%0A%0A    var targetHalosWidth = d.target.activeRoleTypes.length *
 2%0A
-
 %0A    deb
@@ -868,16 +868,35 @@
 rceR - 3
+ - targetHalosWidth
 %0A%0A%0A    v
@@ -1032,33 +1032,33 @@
 veto(d.source.x-
-1
+2
 , d.source.y-sou
@@ -1216,17 +1216,17 @@
 wLength-
-4
+7
 )%0A      
@@ -1340,33 +1340,33 @@
 neto(d.source.x+
-1
+2
 , d.source.y-sou

implement arrow design